How to change the colour
Pick the colour in the library before you copy, or change it in Framer’s right panel when the option is there.
a 1-minute guide
How to add icons to Framer
Short answer
Click Copy SVG on any icon and paste it onto your Framer canvas with Ctrl+V / ⌘+V.
Which file should I download?
SVG
Framer turns pasted SVG into a graphic layer that stays sharp at every size. You can also drag an .svg file onto the canvas.
Step by step
-
Copy the icon
Open the library, click an icon, choose a colour and press Copy SVG.
-
Paste it into Framer
Select the frame or section you want and press Ctrl+V (⌘+V on Mac).
-
Change the colour
Select the icon and look for its colour in the right panel. If you can’t change it there, copy the icon again in the colour you want.
-
Resize and publish
Drag a corner or type a width and height in the right panel. It stays sharp on every screen.
How to resize it
Drag a corner, or set width and height in the right panel. Keep them equal so the icon isn’t squashed.
Something not working?
Nothing happens when I paste.
Make sure you clicked Copy SVG (not Download), and that the Framer canvas is focused.
The icon looks squashed.
Set the same value for width and height.
a shortcut
Stuck? Let your AI help in Framer
Click Claude, ChatGPT, Gemini, Perplexity or Grok. We copy a ready brief (“help me add an icon to my Framer 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