Developers

Search

How to add icons

Learn how to add and customize icons in your Framer website using built-in icon libraries, plugins, or SVG files.

Icons help communicate actions, highlight content, and improve the visual clarity of your designs. Framer supports built-in icon libraries, marketplace plugins, and custom SVG imports.

Add icons from built-in icon libraries

Framer includes several built-in icon libraries, including:

  • Phosphor

  • Feather

  • Meteor

  • Basicons

  • Lucide

To add an icon:

  1. Open the Insert menu.

  2. Select Icons.

  3. Choose an icon library.

  4. Drag an icon onto the Canvas.

Insert panel in Framer showing all the different Icon components.

Import SVG icons

You can add custom SVG icons directly to your project.

To import an SVG file:

  • Drag the SVG file onto the Canvas, or

  • Copy the SVG and paste it using ⌘ + V on macOS or Ctrl + V on Windows

Once imported, the SVG becomes part of your design and can be positioned and styled like other elements.

Icons help communicate actions, highlight content, and improve the visual clarity of your designs. Framer supports built-in icon libraries, marketplace plugins, and custom SVG imports.

Add icons from built-in icon libraries

Framer includes several built-in icon libraries, including:

  • Phosphor

  • Feather

  • Meteor

  • Basicons

  • Lucide

To add an icon:

  1. Open the Insert menu.

  2. Select Icons.

  3. Choose an icon library.

  4. Drag an icon onto the Canvas.

Insert panel in Framer showing all the different Icon components.

Import SVG icons

You can add custom SVG icons directly to your project.

To import an SVG file:

  • Drag the SVG file onto the Canvas, or

  • Copy the SVG and paste it using ⌘ + V on macOS or Ctrl + V on Windows

Once imported, the SVG becomes part of your design and can be positioned and styled like other elements.

FAQ

  • Which icon libraries are included in Framer?

    Framer includes several built-in libraries, including Phosphor, Feather, Meteor, Basicons, and Lucide.

  • Can I use custom SVG icons?

    Yes. You can drag SVG files onto the Canvas or paste SVG content directly into your project.

  • How do I access additional icon libraries?

    Use plugins from the Framer Community to access additional icon collections and specialized icon sets.

Updated

Related articles

How to set up a favicon

Opening a project in the desktop app via URL

Previewing your site

Requirements and browser support

Using pages