Adding icons and setting up a favicon

Use icons to communicate actions concisely and enhance your content blocks' visual appeal. Learn how to integrate icons into your Framer website and set a favicon for your site.

Add icon sets

Framer offers several built-in icon sets, including Phosphor, Feather, Hero, Iconoir, and Twemoji, which can be customized to suit your needs. To add icons to your website, navigate to the Insert menu, select the Icons category, choose your desired icon set, and drag it onto your webpage.

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

Add SVG icons

Import an image or SVG icon file into Framer by dragging it onto the canvas. Alternatively, if you have an SVG copied to your clipboard, use the keyboard shortcut ⌘ + V on macOS or CTRL + V on Windows to paste it directly onto the canvas.

Set up a favicon

Navigate to Menu → Site Settings → General and upload a 32 × 32 pixel PNG image.