Streaming live at 10am (PST)

How to replace List Bullets to custom icons (SVG)

Less than 1 min.

UL - List

Step 1 Add list:


Step 2 - Remove bullets:
list-style-type: none;


Step 3: Remove ul default padding

LI - List item

Step1 - Add left padding (room for the icon)

Step2 - Set background image
Use SVG (Better than png) - without any extra space around.
Left: 0;
top => “tricky” you should manually add Xpx (Depend on font type, font size and so on).

Done :slight_smile:


Fit artboard to bounds by adobe-illustrator

Another option:
custom code

    ul.class-name {
       list-style-image: url('https://my-file.svg');

Rich Text

Same idea:

Cons: No way to combine some types of bullets inside rich-text for now.

1 Like

Thanks for sharing with the community @Siton_Systems :raised_hands:

1 Like

This is one of those ‘why didn’t I think of that?’ sort of things. I’ve always used custom code so this is :ok_hand:


Thanks, very smart. :clap:

This is one of those ‘why didn’t Webflow think of that?’ sort of things

Brilliant workaround - thanks for sharing.

1 Like