How to add icons
Icons are a space-saving, intuitive way to communicate actions and add visuals to your content blocks. Learn how to add icons to your site in Framer.
Using Built-In Icon Sets
Framer offers a number of fully customisable, built-in icon sets that you can easily add to your website, such as Phosphor, Feather, Hero, Iconoir, and Twemoji. To use these libraries, simply navigate to the Icons category in the Insert menu. Select the icon set you wish to use, and drag and drop it onto your webpage.
When selecting the icon, you will be provided with various customisation options on the right hand properties panel. From here, you will be able to change the icon, adjust the color, flip the icon and more.
Importing Icons
You can also import an image or SVG icon file into Framer to use on your site. Simply drag the image file into the canvas to import it into the file.
Note: If you have a SVG copied to your clipboard, you can press CMD / Ctrl + V to paste it directly into the canvas.
Drawing Icons
In order to create a unique look and feel for your site, you can also design icons from scratch. Learn more about using Framer’s Graphic tool in this support article.
