Browse icons

a 3-minute guide

How to add icons to Webflow

Short answer

Upload the SVG in the Assets panel, or paste the SVG code into a Code Embed element so it follows your text colour.

Time
3 min
Download
SVG
Size
any size
Cost
Free

Which file should I download?

SVG

Webflow accepts SVG assets. Pasting the SVG into a Code Embed goes one better: the icon takes the text colour of its parent, so hover colours just work.

Step by step

  1. Pick your icon and download it

    Open the icon library and search for what you need, for example “zap”. Click the icon, choose a colour, then click Download SVG. Or click Copy SVG if you’ll use the Code Embed method.

  2. Simple: upload as an asset

    Open the Assets panel, upload the SVG, and drag it onto the page. It becomes an Image element.

  3. Smarter: use a Code Embed

    From the Add panel, drag a Code Embed element onto the page and paste the SVG code.

  4. Colour it with Typography

    Because our icons use “currentColor”, a Code Embed icon takes the Color from the Typography section in the Style panel. Set a hover state and it changes on hover.

  5. Size it with the font size

    Set width="1em" height="1em" in the code, then the icon grows and shrinks with the font size. Perfect next to button text.

How to change the colour

Image element: download the SVG again in a new colour. Code Embed: change the text colour of the embed (or its parent) in the Style panel, including hover states.

How to resize it

Image element: set width in the Style panel. Code Embed: use width="1em" height="1em" and control it with font size.

Something not working?

My Code Embed icon is black.

Set a text colour on the embed or its parent. The icon uses currentColor.

The icon doesn’t show in the Designer.

Some embeds only render in preview or on the published site. Check with Preview.

It’s the wrong size.

Check the width and height in the SVG code; set both to the same value.

Related guides

FramerPlain HTML websiteFigma All guides

a shortcut

Stuck? Let your AI help in Webflow

Click Claude, ChatGPT, Gemini, Perplexity or Grok. We copy a ready brief (“help me add an icon to my Webflow project”) that points it to our skill file and this guide, and open it for you. Tell it what the icon is for: it finds the right one, then walks you through adding, recolouring and sizing it.

Ready? Find your icon.

500 icons, twenty styles, all free.

Browse icons