How to create custom list bullets using Icons or Images

Do you want to replace the default list bullets with icons or image bullets? It’s actually quite easy to go beyond the default list styling.

There are two ways to change the style of your list bullets:

1. Use a plugin (WordPress-only)
2. Use CSS (works with any website).

I’ll cover both options in this tutorial. Just click a link above to jump to the relevant section.

Custom List Bullets w/ WordPress Plugins

There are several excellent (and free) plugins that let you customize your list bullets. The one caveat is they’re primarily use icon libraries like Fontawesome. Most don’t let you upload custom images.

Advantages of using a plugin:

The above list was created on-the-fly with Kadence Blocks. It took less than a minute to add the icons and style each list-item individually.

Best WordPress plugins for Icon Lists

WordPress is moving full-steam ahead with the new Gutenberg editor experience, so most of these plugins are block-based. I have included one shortcode-based plugin (shortcodes ultimate) as well some page builders.

Gutenberg plugins:

• Kadence Blocks (free / pro)
• Ultimate Addons Gutenberg (free)
• Stackable (free / pro)

Shortcode Plugins (works with classic editor)

• Shortcodes Ultimate (free / pro)

Standalone Plugins

• Elementor (free / pro)
• Beaver Builder (pro)
• Thrive Architect (pro)
• and pretty much any other page builder

Creating an Icon List with Gutenberg Blocks

Regardless of which plugin you choose, the workflow is basically identical.

Steps to add a custom list:

1. Click add block
2. Select an icon list block from your block library
3. Add the list items
4. Select the icon(s) Type and Style

Here’s a demo of just how easy it is:

Custom List Bullets with CSS

You don’t need a plugin to create completely unique list bullets. You can do it with a bit of CSS code, and once you understand how it works it’s easy to create multiple list styles:

Advantages:

• Use icons, images, unicode or emojis
• Works on any website
• Complete control over styling

Disadvantages:

• Have to be careful about browser compatibility
• May need to load external resources (e.g. FontAwesome)
• Requires some CSS knowledge

FontAwesome Icon Bullets with CSS

The most popular free icon library in the world is FontAwesome. Their amazing selection of icons is perfect for creating custom list bullets.

Requirements:

1. Install FontAwesome on your website
2. Select an icon to use and copy the unicode

Then all you need to do is write the CSS code to create the list. We’ll be using a ‘before’ pseudo-element to hold the icon.

We’ll want to use a custom Classname for our CSS code. In this case, I’m using .check-mark-list but you can use whatever we want. We’ll then add this css class to any unordered lists we want to apply our styles to.

ul.check-mark-list   { /*choose your own descriptive class name. */
    list-style-type: none;   /* remove the default list bullet */
}

ul.check-mark-list > li:before {
   content: "\f058";  /* put the fontawesome unicode here preceded by slash */
   font-family: "Font Awesome 5 Free";
   font-weight: 900;    /* required for Free version */
   margin-right: 8px;  /* Spacing between bullet and list text */
   color: hotpink;       /* we fancy */
}Code language: CSS (css)

Then simply add your chosen class name to an unordered list, and voila! You should have a styled list (like below).

• Demo list item #1
• Demo list item #2
• Demo list item #3

Troubleshooting Tip: If you see empty boxes where the icons should be, it means you’ve either haven’t installed Fontawesome correctly, are using the wrong icon code, or haven’t set font-weight to 900.

Emoji List Bullets (CSS)

Emojis actually make pretty eye-catching list bullets, and they have pretty good browser support too. You can even do some cool hover effects like changing the emoji on hover.

And Emojis are easier to use than FontAwesome too, since you don’t have to load a separate stylesheet.

Demo (with hover effect):

• This is an emoji list
• It has a cool hover effect
• Test it for yourself!

ul.emoji-list {
    list-style-type: none;  /* remove default bullet */
}

ul.emoji-list > li:before {
    content: "❤️";  /* create the pseudo-element and add emoji */
    margin-right: 8px;  /* spacing between bullet and text */
}

ul.emoji-list > li:hover:before {
    content: "💖";    /* change the emoji on hover! */
}Code language: CSS (css)

Even more list styles

This is just an quick example of custom list styles you can add to your website. But there are literally thousands of other creative modifications you can make to your lists.

Other ways to level-up your lists:

1. CSS Counters
2. Colored list markers
3. Horizontal (menu-style) lists

CSS-Tricks has some fantastic CSS List Recipes to get you started. You can copy these boilerplate examples and make them your own.

And if you have any examples of styled list bullets that you love (or need help with your own lists) make sure to leave a comment below.