To keep the asset panel under control, try to use existing icons when it's possible. You can search for existing icons in the asset panel under the icons folder or you can copy an icon from another page.

Creating new icons

DISCLAIMER This works best with single color, simple icons. If it's a complex icon using gradients, export it as a PNG.

To create a new icon for the Webflow website, it's best practice to design it in Figma following these specs:
‍
Width: 24px
Height: 24px
Export as: SVG

You can design icons outside of this size range, but it's easiest to at least export them at this size.

‍

Once your icon is designed and exported

You will want to convert it into a data format that Webflow can interact with. Use this tool to convert the SVG into data URI. Follow these steps:

Clear the existing data inside the tool.
Upload your SVG
Change dimensions in the top right to 24px if needed
Press the optimize button
Copy the code
Open Webflow
Add an embed element
Copy and paste the code into the embed
Delete any of the fill=" " and stroke=" " values
Replace the default <svg> opening tag

Replace this highlighted string of text.

<svg aria-hidden="true" role="img" fill='currentColor' viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

With this one.

‍

That's it!

‍

Now you can style the icon using the CSS styles and can easily change the color of the icon.

Icon Size Classes

Reference the Utility Classes page for a whole list of icon classes.

You can change the sizing of icons by using the icon-1x1 classes.

icon-1x1-small

icon-1x1-medium

icon-1x1-large