How to replace List Bullets to custom icons (SVG)

[Siton_Systems (Ezra Siton)]

Less than 1 min.

UL - List

Step 1 Add list:
https://university.webflow.com/article/lists

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

Related:

Fit artboard to bounds by adobe-illustrator

Another option:
custom code

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

[Siton_Systems (Ezra Siton)]

Rich Text

Same idea:

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

[PiterDimitrov (Webflow Expert)]

Thanks for sharing with the community @Siton_Systems

[sarahfrison (Sarah - Webflow Expert/mod)]

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

[Thijs_Vandeursen]

Thanks, very smart.

[new_work_city]

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

[william_hope]

Brilliant workaround - thanks for sharing.