How do I import an icon library into Figma?
Search Figma Community for Lucide, Heroicons, or Phosphor — duplicate the official file into your workspace or install the library's Figma plugin.
Best Icon Libraries with Figma Integration
11 curated figma icons
Last updated: June 2026
Downloading random SVGs into Figma works once, then you lose consistency. These libraries either publish official Figma community files or plugins so your design file stays aligned with what developers install via npm. Worth bookmarking if you run a shared design system or hand components to a frontend team that expects Lucide or Heroicons by name.
IconsFree
CSS.gg
Explore a collection of over 700 open-source CSS-only icons at CSS.gg. Easily integrate these customizable icons into your web projects.
IconsFree
Eva Icons
Access a pack of beautifully crafted icons at Eva Icons. Use these scalable icons to enhance the visual appeal of your designs
IconsFree
Feather Icons
Discover simply beautiful open-source icons at Feather Icons. Choose from a wide range of minimalist icons for your web projects.
IconsFree
Heroicons
Heroicons offers a collection of beautifully crafted SVG icons. Enhance the visual appeal of your websites and applications with these stylish icons
Icons
Hugeicons
An icon library with over 40,000 icons in 9 different stylescreated to make your web and mobile projects look more polished and user-friendly.
IconsFree
Iconoir
Iconoir provides a collection of open-source vector icons tailored for designers. Find and incorporate high-quality icons into your design projects.
IconsFree
Lucide.dev
Lucide.dev offers an open-source icon set specifically designed for developers. Access a collection of simple and intuitive icons to enhance your projects.
IconsFree
Material Symbols
Material Symbols are our newest icons consolidating over 2,891 glyphs in a single font file with a wide range of design variants.
IconsFree
Phosphor Icons
Discover an open-source icon set for design and development at Phosphor Icons. Choose from a comprehensive library of icons for your projects.
IconsFree
Remix Icon
Remix Icon is an open-source icon library with a vast selection of icons for your projects. Customize and integrate these icons easily into your designs.
IconsFree
Tabler Icons
Tabler Icons offers a premium and free icon set for various purposes. Explore a diverse collection of icons to enrich your designs and applications.
How to pick one
- Prefer official Figma files from the library maintainer over third-party recreations — stroke weights drift fast.
- Check whether the set uses a 24px grid; that matches most UI component libraries.
- If you also ship React, pick a library with both Figma and npm packages to avoid maintaining two different icon sets.
Frequently Asked Questions
Do Figma icon plugins sync with code automatically?
No. Figma files and npm packages stay separate — developers install the matching React library. Shared naming keeps design and code aligned.
What is the best Figma icon library for design systems?
Lucide and Heroicons are the most common choices — both use a 24px grid, offer outline styles, and have official Figma community files plus React packages.
Can developers use icons from my Figma file directly?
They can export SVGs, but it is better to reference the npm package in code. That keeps icons updatable and consistent with your design system tokens.
How do I keep Figma icons consistent with production UI?
Use one official library in Figma and the same library in code. Document icon names in your design system so designers and developers use matching labels.
Related lists
Reviewed by Sergei Chyrkov · Last updated June 2026 · How we curate
Design Sweets Weekly
New picks, free tools, and deals — delivered to your inbox every week.
Trusted by 1500+ designers
No spam, just updates and sweets. Unsubscribe anytime.