How to Replace Bullet Points with Custom Images in WordPress Lists

How to Replace Bullet Points with Custom Images in WordPress Lists

Bullet points serve a functional purpose, but they’re not always ideal for polished, professional designs. Whether you’re building a corporate website or aligning visual elements with your brand, replacing default bullets with a custom image—like a branded checkmark—can give your site a clean, custom look.

Let’s walk through how to do exactly that using simple CSS and a small image icon.

Step 1: Upload Your Custom Icon

Upload the image you want to use as the bullet replacement. Ideally, use a small PNG file with a transparent background. For example, the Marguerite Concrete website uses this checkmark image:

checkmark icon marguerite concrete

https://margueriteconcreteinc.com/wp-content/uploads/2024/11/checkmark-icon.png

Step 2: Add Custom CSS

Add the following CSS to your child theme’s style.css file or the Customizer > Additional CSS:

ul.checklistimg {
  list-style-type: none;
  padding-left: 0;
}

ul.checklistimg li {
  line-height: 2;
  margin-bottom: 6px !important;
  background-image: url('https://margueriteconcreteinc.com/wp-content/uploads/2024/11/checkmark-icon.png');
  background-size: 36px 36px;
  background-position: top left;
  background-repeat: no-repeat;
  padding-left: 40px;
  position: relative;
}

This CSS:

  • Removes the default bullet style.
  • Adds the image as a background to each list item.
  • Adjusts padding and sizing so the text aligns nicely beside the image.

Step 3: Add the Class to Your HTML or Block Editor

When creating your list in the WordPress editor or HTML, add the class checklistimg to the <ul> tag:

<ul class="checklistimg">
  <li>Commercial Buildings</li>
  <li>Government & Municipal Buildings</li>
  <li>Healthcare</li>
  <li>Educational Institutions</li>
</ul>

And that’s it! Each list item now uses your custom image in place of the standard bullet. You can see this in use on a site we built for Marguerite Concrete, where the check icon mirrors their logo:

marguerite concrete image checklist

Tips for Best Results

  • Optimize your image: Use an SVG or PNG optimized for web (under 10KB if possible).
  • Keep consistency: If using a checkmark icon, make sure it aligns with your brand’s style.
  • Responsive test: Check the spacing and alignment on both desktop and mobile views.

Wrapping Up

Customizing your bullet points with an image is a quick way to elevate your site’s design and add a branded touch. Whether you’re a contractor, agency, or small business, even small visual details can set you apart.

Need help implementing this on your site? Reach out—we’re happy to help.

Want to Use Icons Instead?

If you’re looking for a lightweight alternative using icons instead of images, check out our guide on how to use Font Awesome icons in your lists.

Learn how to replace bullet points with Font Awesome icons in WordPress.