Search

How to add icons

Use icons to communicate actions concisely and enhance the visual appeal of your content blocks. Learn how to integrate icons into your Framer website.

Add icon sets using components

Framer offers built-in icon sets, including Phosphor, Feather, Hero, Iconoir, and Twemoji, which can be customized to fit your design. To add icons:

Open the Insert menu.
Select the Icons category.
Choose an icon set.
Drag the icon onto your webpage.

Insert panel in Framer showing all the different Icon components.

Customize your icon using the properties panel on the right. You can change the icon, adjust its color, flip it, and more.

Add icon sets using plugins

Expand your icon options with plugins like Phosphor, Bootstrap Icons, or Logofy, available in the Framer Marketplace. To use a plugin:

Click the Plugins button in the top menu.
Search for your desired icon set.
Click the plugin to open and use it.

For more information on how plugins work, check this help article.

Add SVG icons

You can import SVG icons in two ways:

Drag an SVG file onto the canvas.
Copy an SVG to your clipboard and paste it using ⌘ + V (macOS) or CTRL + V (Windows).

Need more help? Contact us for further assistance.