SVG Icons in Figma – Best Icon Libraries, Plugins & Import Workflow

Figma is the industry-standard design tool, and SVG icons are the currency of UI design. Here’s how to import, organize, and export icons in Figma effectively.

Best icon libraries for Figma

Layout DashboardBellSearchRectangle StackBellMagnifying GlassLayoutBellMagnifying GlassHomeNotificationsSearchLayout DashboardBellSearch

Method 1: Figma Community (recommended)

The fastest way to use free icons in Figma:

1. Open Figma Community (the grid icon in the titlebar)
2. Search for Lucide Icons, Heroicons, or Phosphor Icons
3. Click Duplicate to add the library to your drafts
4. Open the file and Publish as Library via the Assets panel
5. In your project file, enable the library from Assets → Libraries

Once enabled, icons appear as components you can drag-and-drop into your designs.

Method 2: Import SVG files

Download an SVG from AllSVGIcons and import it directly:

1. Download the SVG file
2. In Figma, press Ctrl+Shift+K (or ⌘⇧K on Mac) — Import
3. Select your .svg file — it appears as a vector frame
4. Ungroup if needed (Ctrl+Shift+G), then flatten (Ctrl+E) for a clean vector shape

Or drag-and-drop an SVG directly from your file manager into the Figma canvas.

Method 3: Paste SVG code

For a single icon without downloading:

1. Copy the SVG code from AllSVGIcons (click Copy SVG)
2. In Figma, press Ctrl+V — Figma accepts raw SVG markup from clipboard
3. The icon appears as a vector group on the canvas

Organize icons as components

To reuse icons across your design:

Design System File
└── Icons/
    ├── Navigation/
    │   ├── home
    │   ├── search
    │   └── menu
    ├── Actions/
    │   ├── edit
    │   ├── delete
    │   └── download
    └── Status/
        ├── check
        ├── error
        └── warning

Each icon should be:

• A vector (not a group of paths for complex icons — flatten first)
• 16 or 24px frame with auto-layout off
• Named clearly: icon/home, icon/search, icon/bell

Customize icon color in Figma

For stroked icons:

1. Select the icon layer
2. In the right panel, change Stroke color

For filled icons:

1. Select the vector layer
2. Change Fill color

To apply a color from your design system’s variable collection, click the swatch and select a variable.

Detach and customize

If you need to modify an icon shape:

1. Select the component instance
2. Right-click → Detach instance (or Ctrl+Alt+B)
3. Enter the composition group and edit individual paths

Export icons from Figma

To export a Figma icon as SVG for a developer:

1. Select the icon frame or component
2. In the right panel, scroll to Export
3. Set format to SVG
4. Check Include “id” attribute if the developer needs it
5. Click Export

For batch export, select multiple frames and export all at once.

Icons in design tokens / variables

Modern Figma supports icon tokens via variables:

• Create a string variable for icon names (e.g., icon.home = "home")
• Combine with a code generator plugin (like Tokens Studio or Specify) to sync icon names to your codebase

This connects Figma icons to their code counterparts by name, reducing handoff friction.

Frequently asked questions