Figma has no icon object. As of 2026 there is no separate type for it, which catches people out, because Dev Mode just spots a small vector graphic and offers it as a downloadable asset. A PNG pasted into a frame is a node with an image fill, so it lands on the image side of that line and never gets the same treatment.
Most teams build their icons as reusable components. One main component controls how big every copy is and what color it uses, and the style too if you’ve set up variants. Developers get the artwork as SVG.
The artwork itself usually comes from an open-source set like Material Symbols, Lucide, Phosphor, Tabler or Heroicons. Some teams draw their own on a pixel grid instead.
Figma Icon Sets
These sets vary in grid size, stroke weight and licence, and those three things decide whether a set will fit your existing interface.
Iconify
All open source icon sets in one plugin. 150+ icon sets, over 200k icons. Access massive libraries from Material Design, FontAwesome, Phosphor, and more without switching tools.
Most popular icon plugin with millions of downloads.
Material Design Icons
Google’s official icon system with consistent design language. Clean, minimal icons that work well in any interface. Available in multiple styles and weights.
Open Iconic Icon Set by Iconduck
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →Open source icon collection with simple, clear designs. Perfect for web interfaces and mobile apps. Free to use for any project.
coolicons
Modern icon pack with rounded corners and friendly feel. Good for startups and consumer apps. Includes common interface icons and symbols.
Streamline Icons, Illustrations, and Emoji
Professional icon library with consistent style across thousands of icons. Includes illustrations and emoji in addition to standard icons. High quality SVG and PNG formats.
Free Icon Pack 1800+ icons
Large collection of interface icons in multiple styles. Covers most common needs for web and app design. Well organized and easy to browse.
Shaper
Icon creation tool that lets you build custom icons inside Figma. Combine shapes and paths to make unique symbols. Good for when existing icons don’t fit your needs.
Carbon Icons
IBM’s design system icons with clean, technical aesthetic. Perfect for enterprise software and data-heavy interfaces. Professional look that works in business contexts.
3dicons
Three-dimensional icon library that adds depth to your designs. Modern 3D style that works well with current design trends. Includes common interface and business icons.
IconPark
ByteDance’s icon library with over 2,000 icons. Multiple styles including outline, filled, and two-tone versions. Good coverage of technology and business icons.
Social Media Icons & Logos
Complete collection of social platform icons and logos. Includes all major platforms with current branding. Perfect for footer links and social sharing buttons.
Simple Brand Icons
3,300+ brand logos from popular companies and services. Simple, single-color versions perfect for any design. Includes tech companies, social media, and more.
Lineicons
Line-style icon set with consistent stroke width. Clean, minimal design that works well in modern interfaces. Good for web and mobile applications.
Iconify Icons Library
Unlock access to over 200,000+ free icons from popular sets like Material Icons, FontAwesome, EmojiOne, Fluent, and more – all without leaving Figma! Updated version with improved interface.
Material Design Icons
Another version of Google’s Material Design icon system. Includes latest updates and additions to the icon family. Comprehensive coverage of interface needs.
Untitled UI Icons
1,100+ icons designed specifically for user interfaces. Clean, modern style that works well with current design trends. Good for SaaS and web applications.
Unicons by IconScout
Professional icon library with multiple styles and weights. Includes outline, filled, and monochrome versions. Good coverage of business and interface icons.
IconPark
Another version of ByteDance’s icon system. Includes latest additions and improvements. Consistent style across all icons with multiple variants.
Openstrokeicons
Open source stroke-based icon library. Includes icons and illustrations for UI/UX design. Consistent line weight and style throughout the collection.
Iconly v3 + Iconly Pro
Modern icon pack with rounded style and friendly appearance. Includes both free and pro versions. Good for consumer apps and friendly interfaces.
Emoji Mega Pack
3,900 iOS Apple emojis ready for Figma. Perfect for adding personality to your designs. Includes all categories from faces to objects and symbols.
3dicons – Open Source Library
Open source 3D icon collection with modern aesthetic. Adds depth and visual interest to flat designs. Includes common interface and business icons.
Basil Icons
Clean, minimal icon set with consistent style. Good for web interfaces and mobile apps. Simple design that works well at any size.
Iconsax
Modern icon library with multiple styles and variants. Includes outline, filled, and bulk versions. Good coverage of interface and business needs.
Uicons by Flaticon
Interface-focused icon collection from Flaticon. Clean, professional style perfect for web and mobile interfaces. Free to use with consistent design language.
Popular Brand Logos
Plugin that provides quick access to popular brand logos. Includes current versions of major company logos. Perfect for client work and case studies.
Unicons – Shared Library Ready
Unicons formatted as shared library for team use. Easy to maintain consistency across projects. Includes line, filled, and solid versions.
Tech Stack & Design Stack Icons
Icons for technology and design tools. Perfect for portfolio projects and technical documentation. Includes logos for programming languages, frameworks, and design tools.
Country Flags Icon | Flagify
Complete collection of country flags in icon format. Perfect for international applications and location selectors. Includes all recognized countries and territories.
Easy Iconfont
Tool for creating icon fonts from your Figma icons. Convert your custom icons into web fonts for better performance. Useful for custom icon systems.
Stratis UI Icons
1000+ free icons designed for user interfaces. Modern style with consistent design language. Good for web applications and mobile interfaces.
10,000 Free Icons
Massive open source collection with 10,000 icons. Covers almost every possible need for interface design. Well organized with multiple categories and styles.
Phosphor Icons
Clean, minimal icon family with multiple weights. Includes thin, light, regular, bold, and filled versions. Consistent design across all weights and styles.
Bootstrap Icons
Official icons from the Bootstrap framework. Perfect for web development projects using Bootstrap. Clean, simple style that works well in any interface.
Which Icon Libraries and Plugins Are Worth Using in Figma?
Style consistency and license terms should decide it, not how many icons a set ships with. Material Symbols, Lucide, Phosphor, Tabler and Heroicons cover most interface work, and all five are open source.
| Set | Styles | License | Figma delivery |
|---|---|---|---|
| Material Symbols | Outlined, rounded, sharp, plus fill, weight, grade and optical size axes | Apache 2.0 | SVG download or Google’s official plugin |
| Lucide | Single 2 px stroke style | ISC | Lucide plugin |
| Phosphor | Six weights, thin to duotone | MIT | Official plugin and Figma library |
| Tabler | Outline and filled icons on a 24 px grid, 2 px default stroke | MIT | Tabler plugin |
| Heroicons | Outline, solid, mini, micro | MIT | Figma file and SVG |
Google’s Material Symbols guide says the set packs more than 3,800 icons into one variable font. Tabler is bigger on paper. Its GitHub README lists 6,184 icons, 5,130 outline and 1,054 filled.
A product rarely needs thousands. Catalog size only matters when finding the right metaphor is the actual bottleneck.
Community files, plugins and standalone libraries
Duplicate a Community file and the icons arrive as components. The terms come from whoever made the file, so read them.
Plugins let you search without leaving Figma and insert straight onto the canvas. Iconify, Font Awesome, Tabler, Phosphor and Lucide all have one.
Standalone libraries mean downloading SVG files or opening the set’s own Figma file, which Heroicons ships.
Iconify is the easiest plugin to start with. It always places icons on the canvas as SVG vectors, and per the Iconify docs it lists only open-source sets.
Font Awesome’s official plugin needs a Font Awesome account and opens on Classic Solid, with dropdowns for the other families and styles.
License and attribution terms
The Noun Project’s free Figma plugin gives unlimited PNG downloads, as long as you credit the artist.
That works for a mockup. It fails for a shipped product that needs vector files at any size without a credit line.
The five sets in the table use MIT, ISC or Apache 2.0 licenses, which permit commercial use. Keep each set’s license file with the project, and check Community files one by one.
When a custom set beats a ready-made one
Ready-made sets run out the moment a product needs an object the set never drew. Brand marks and product-specific objects are the usual gaps.
Restricting a big set is cheaper than drawing a new one. New Zealand’s education design system limits Material Symbols to the Rounded style, weight 400 and no fill.
Draw only the gaps. Match the host set’s grid and stroke exactly, and its radius too.
How to Add Icons to a Figma File
Plugins are the fastest way to get an icon onto the canvas. Pasted SVG code gives you more control over structure, and a duplicated Community file makes sense when you want a whole set at once.
Insert through a plugin
With Iconify, open the Plugins menu, choose Iconify, search for the icon, then click Import Icon or drag it onto the canvas.
Font Awesome works the same way once you sign in, and custom icons from Pro Kits show up in the same search. Tabler’s plugin adds one extra: after insertion you can change size, color and stroke width without leaving it.
Paste SVG code or files
Copy the SVG markup and paste it onto the canvas. Figma builds editable vector layers, so fill and stroke controls work as on any shape.
Single-color icons recolor most easily. Pasting suits one-off icons, and a full set is faster through a plugin or a duplicated file.
Duplicate a Community icon file
Duplicating a file copies its components into your drafts. To reuse the set across files, publish it as a library where your plan allows, since Figma shares components and styles across files through team libraries.
Once an icon is in, wrap it in a frame sized to the set’s grid and name it, then convert it to a component. Loose vectors drift in size and color from one screen to the next.
What Icon Size and Grid Work Best in Figma?
A 24 x 24 px frame is the default for interface icons, with 16, 20 and 32 px as secondary sizes. Draw on one grid and ship the other sizes as redrawn or optical variants, not stretched copies.
Lucide works on a 24 x 24 px canvas with 1 px minimum padding and a 2 px stroke (Lucide icon design guide). Carbon’s sizes are 16, 20, 24 and 32 px, with 16 as the default (Carbon documentation). Heroicons v2.1 added a 16 x 16 micro set for higher-density interfaces (Heroicons release notes), and Material Symbols has an optical size axis running from 20dp to 48dp (Google Fonts documentation).
Prelude Security’s Origin brand guide (2025) treats 24 px as the standard. Dense UI gets 16 px, and headers get 32 px.
Padding, keylines and the pixel grid
Lucide keeps strokes off the canvas edge because strokes placed there can clip. It also compares every icon with a circle and a square for similar visual weight, which is the keyline idea in practice.
In Figma, set up a layout grid in the icon frame and switch on the pixel grid view, so anchor points land on whole pixels. Off-grid anchors blur on low-density displays, a point the Lucide guide makes about its own sets.
Resizing without wrecking the stroke
An icon only looks the same at two sizes if its stroke weight changes with the size. Material Symbols handle this with the optical size axis, which adjusts stroke weight as the symbol grows or shrinks.
To scale an icon in Figma with its stroke, use the Scale tool (K). It resizes proportionally and scales strokes along with the shape, per the Figma Help Center, while ordinary resizing keeps the stroke width unchanged.
The tool can’t scale layers nested inside a component instance, according to the same help article.
That matters once icons live in components. Plan the 16, 20 and 24 px versions as variants instead of scaling instances.
How to Draw a Custom Icon in Figma
Draw on a frame that matches the grid, build shapes with the pen tool and boolean operations, and keep strokes live until the set is final. Outlining strokes early locks the stroke width.
Start with a square frame sized to the grid, using the same canvas as every other icon in the set.
- Create the frame at 24 x 24 px and add a layout grid.
- Mark the safe zone, and park a circle and a square beside the canvas as visual weight references.
- Draw with the pen tool (P): click for straight segments, drag for curves, click the first anchor to close a path.
- Set the stroke to the set’s width, with round caps, round joins and a centered position, as Lucide does.
- Combine shapes with boolean operations.
- Apply the set’s corner radius and check that every anchor sits on a whole pixel.
- Convert the finished icon to a component, and outline strokes only in an export copy.
Boolean operations
| Operation | Result | Typical icon use |
|---|---|---|
| Union | Merges layers into one shape | Joining a body and a handle |
| Subtract | Top shapes cut away from the bottom shape | Holes, notches and crescents |
| Intersect | Keeps only the overlap | Clipped and lens-shaped forms |
| Exclude | Keeps only the non-overlapping areas | Ring-like cutouts |
Boolean groups stay editable, so you can keep adjusting the layers inside them. They work on shape layers, vector paths and text layers, but not on frames or sections (Figma Help Center, updated June 2025).
The same article notes that boolean operations now use a layer’s stroke and fill to calculate geometry, so older groups may prompt an update.
Corner radius and stroke ends
Lucide’s rule is a 2 px radius on shapes of 8 px or more and 1 px on anything smaller. In Figma you round the corners with the radius field on each rectangle, so enter the set’s value once and reuse the shape.
Outline stroke versus live strokes
Keep strokes live in the working file. Outline stroke converts each stroke into a vector path, so the result is a filled shape and the stroke width can no longer be changed with the stroke controls (Figma Help Center).
A Figma Community forum thread on flattening stroked icons reports unwanted shapes on open paths. That is one more reason to outline an export copy and never the source.
Live strokes keep the icon editable, while outlined paths freeze the weight.
How to Turn Icons Into Components With Variants and Properties
Each icon starts as a main component. If it comes in several sizes or styles, those go into a component set, and any component that holds an icon gets an instance swap property. One main component then drives every instance in the file.
Select the icon frame and press Option Command K (Ctrl Alt K on Windows) to make a component in Figma. Instances stay linked to it and receive any change made to the main component.
Size variants in one component set
Select the components and click Combine as variants. Figma places them in a component set, which holds only components, so text, annotations and nested frames cannot go inside it.
Slash naming speeds up creating variants in Figma. When you combine components, the text before the slash becomes the set name and the attributes after it become values, such as Size 16, 20 and 24.
Mind the size of the set. Adding an instance with variants imports every variant in the set, and large component sets affect Figma’s speed and performance, per Figma Help. For large libraries, one base-size component per icon, plus variants only where a size really differs, keeps the import light.
Instance swap for icon slots
The instance swap property marks which nested instances can be swapped from the Properties panel. It can also carry preferred instances, a short list that tells other designers which icons to choose (Figma Help Center).
To create one, select the main component or component set, open the Properties section, choose Instance swap and set the default icon. Name it Icon, and call the matching boolean Show icon so the two stay distinct.
Overrides survive a swap only when layer names match between the current instance and the new one, per Figma Help. Name the inner layers identically across the set, for example always “vector”.
One catch shows up repeatedly on the Figma forum. After a swap, the new icon can fall back to its own default color instead of the color set in the main component, usually because the inner layer names or layer counts differ between icons. Test a swap on a colored button before publishing the library.
How to Control Icon Color, Stroke and Style With Variables
Icon fills and strokes get bound to color variables, and stroke weight to a number variable. Switching modes then covers light, dark or dense layouts. One edit to a variable updates every instance, so nobody recolors an icon by hand.
Setup follows the routine in any guide to Figma variables: one collection for color, another for numbers such as stroke weight and radius.
Fill and stroke recoloring
For line icons, bind the stroke color and leave the fill empty. Filled icons only need the fill bound. Mixed icons need both, or the dot or accent stays behind when the theme changes.
Color variables apply to solid fills, gradient stops, stroke colors, shadow effects and color styles, according to the Figma Help Center (updated June 2025). Variables also carry modes, which is the reason to prefer them over fixed colors for icons that must follow a theme.
Stroke weight and corner radius as numbers
Number variables can drive stroke weight and corner radius, per the same Help Center material. Create one variable for the set’s stroke width and one for its radius, then bind every icon layer to them.
Name them by role, not by value: icon/stroke and icon/radius. A dense layout mode can then hold a thinner stroke without anyone touching an icon.
Test the binding inside a nested instance before rolling it out across the library.
Line, filled or two-tone
Apple’s SF Symbols offers four rendering modes (monochrome, hierarchical, palette and multicolor) in SF Symbols 3 and later, plus three scales, according to the Human Interface Guidelines.
Most open-source sets stay in the first mode. Lucide and Tabler icons take their color from a single currentColor stroke value in the SVG, so one color variable covers them.
Two-tone is the exception. Carbon’s documentation describes icons with two fill colors, where CSS targets the inner path through a data-icon-path attribute. In Figma that means two color variables per icon, and layer names a developer can read.
Whatever the style, check the contrast between icon color and background in every mode. Apple notes that symbol size and background contrast change how well people can make out a symbol’s details.
How to Name and Organize an Icon Library
Use slash-separated names in the pattern Icon/name, written in kebab-case so they match the file names developers import. Figma groups slash names into folders in the Assets panel and the Instance menu, so the name doubles as navigation.
Figma’s documentation (updated June 2025) recommends the slash convention and uses Icon/Alert, Icon/Profile and Icon/Close as examples. It also asks teams to document the structure, which belongs in the wider design system’s documentation.
| Approach | Example | How it holds up |
|---|---|---|
| Depiction | Icon/floppy-disk | Stable, and the rule Lucide follows |
| Meaning | Icon/save | Ties to product terms, but one glyph can serve two meanings |
| Appearance | Icon/blue-large-save | Breaks the moment color or size changes |
Rules that survive export
Lucide’s contributor guide names icons for what they show (floppy-disk, not save), while Figma’s own examples lean toward meaning (Icon/Alert).
Pick one rule per library. Depiction names suit a shared set, and meaning names suit an app-specific one.
Grouped icons follow group-variant, such as badge-plus. Alternates get named for what makes them different (send-horizontal, not send-2).
File layout, frames and the swap list
In the Assets panel, the component list mirrors the file structure of file, page and frame. Figma also treats components in the same frame or section as related, and those are the ones the Swap instance window offers first.
So one frame per category (arrows, files, status) gives every instance swap property a short, sensible list. Figma’s help article uses an example library with an Icons page and separate 16 and 32 sections, which keeps the two sizes apart.
Figma’s component-management tips add a few more rules that match the wider best practices for Figma components. Name what a component is, not how it looks today. Keep property names uniform, so it’s always Size and never Scale or Dimensions for the same thing. And use the vocabulary developers use in code.
The Show subfolders setting displays slash names as nested folders, which helps once the set grows large.
How to Export Icons as SVG and Hand Them to Developers
Export UI icons as SVG with Simplify stroke on and Include “id” attribute off, keep PNG only as a raster fallback, and use PDF for print or tools that cannot read SVG. Open one exported file in a browser before exporting the whole set.
| Format | Best for | Catch |
|---|---|---|
| SVG | UI icons at any size | Stroke handling needs a test |
| PNG | Raster fallback, previews | Pixel size is fixed at export |
| Print and non-web tools | SVG-only settings do not apply |
Export settings that matter
Simplify stroke defaults to on in Figma’s developer documentation. Inside and outside strokes are exported as an approximation, because SVG only supports centered strokes.
Including the “id” attribute adds layer names as ids and increases file size, though masks and gradients keep their ids regardless.
Text is exported as glyphs by default, so a text layer inside an icon cannot be edited after export.
That is why centered strokes are the safe choice. Lucide requires them, and Figma’s developer documentation gives the reason: SVG has no inside or outside stroke.
Sources disagree on what happens to strokes. Figma’s export help article lists strokes as exported to fills, while the developer documentation says Simplify stroke keeps a stroke attribute where possible and falls back to a mask only for inside and outside strokes.
Test one stroked icon. If the file carries masks, outline the stroke in an export copy and leave the source alone.
Dev Mode and code inspection
Dev Mode detects icons automatically and lists them as downloadable assets: hover, pick a file type, click download (Figma Help Center, as read in October 2026).
- Turn off Automatically detect icons under Main menu, then View, to inspect a single vector layer inside an icon
- Copy as code returns CSS, iOS or Android snippets
- The inspect panel shows applied styles and variables, plus component and property names
Those names are what developers read, so the library naming does double duty. A step-by-step guide to Dev Mode covers the panel in more detail.
Slimming down and converting SVG
Raw exports carry more than an icon needs.
SVGO is the usual tool for slimming down SVG files. It strips editor metadata, comments, hidden elements and redundant values without changing how the icon renders, per its README.
SVGO 3 and earlier list removeViewBox in the default preset, and SVGO 4 dropped it. On an older version, override it to false, or icons lose the viewBox they scale from.
Lucide’s guide recommends tidying paths to 3 points of precision with Lucide Studio.
SVGR then turns raw SVG into React components. The –icon option sets width and height to 1em, so the icon scales with text size. –replace-attr-values swaps a hardcoded fill such as #000000 for currentColor, so CSS color drives the icon.
The CLI also runs an SVGO step by default before conversion, so cleanup happens in the same pass.
SVG files or an icon font?
Progress’s front-end team tried an SVG approach twice and went back to icon fonts, according to a 2016 post on its developer blog. The author measured SVG sprites at up to 250% the size of an icon font, using IcoMoon sets.
KeyCDN’s 2023 comparison lands elsewhere: SVGs are easier for screen readers to identify than icon fonts. The two sources measure different things, file size in one case and accessibility in the other.
For a design-system set with per-icon color and sizing, SVG is the default, and Carbon ships its icons as SVG packages for vanilla JavaScript, React, Angular and Vue. Reach for a font only when load size dominates and every icon is single-color.
Where Figma Icon Workflows Break Down
The workflow strains in a few spots, mostly multicolor icons, plan-gated tooling, accessible names and stroke-based icons drawn at many sizes. Every limit has a workaround, and none of them disappears.
Brand and multicolor icons carry their own colors, so a single recolor variable cannot theme them. Keep them out of the themed set.
Plan limits are the annoying one. Modes per collection depend on the plan, Code Connect is available on Organization and Enterprise plans, and Dev Mode’s Code section is missing when copying and sharing are disabled on the file (Figma Help Center, as read in October 2026).
Carbon’s React icons are decorative by default and are announced only when an aria-label or aria-labelledby is passed.
Stroke icons at many sizes are the messiest case. Figma forum requests from February and May 2026 ask for stroke scaling at the component level. The Scale tool (K) is currently the only way to scale a stroke with its shape, and it does not work with Auto Layout or component resizing.
The accessibility gap sits in code, not in the design file. Annotate icon-only buttons in the file so developers add the label, and follow the basics of accessible SVG files for the rest.
A published set is the cheaper route when nobody on the team owns the icons. Upstream releases carry the fixes you would otherwise draw yourself, such as the chevron icon adjustments in Heroicons v2.1.
Figma Icons FAQ
Are Figma icons the same as the Figma logo?
No. The term covers icons designed or used inside Figma files, such as Material Symbols or Lucide sets.
The Figma logo is a trademarked mark, and Figma’s trademark guidelines allow its use to identify Figma or its products only when the use is truthful, fair and not misleading.
Can Figma’s AI generate icons?
Not yet, according to Figma’s Help Center. It lists Create icons as coming soon for the Figma agent. Today the agent can convert static images, such as hand-drawn symbols, into editable vector layers.
The agent reached general availability on October 6, 2026. It is available on all plans in Figma Design, with some features limited to paid plans, and it now consumes AI credits. Figma’s marketing pages describe icon generation, so check the Help Center feature table before you plan around it.
Does the Figma REST API export icons as SVG?
Yes. The images endpoint renders nodes as SVG, PNG, JPG or PDF and accepts the same SVG options as the app, according to Figma’s developer documentation.
Batch node ids into one request. A December 2025 forum report describes 429 rate-limit errors after roughly 10 image calls. Since November 17, 2025, limits depend on the user’s seat type, the endpoint’s tier and the plan of the file.
How do I replace one icon with another across a whole file?
Edit the main component if the artwork should change everywhere, since every linked instance receives the update.
To put a different component in its place, use the Instance menu, or Swap libraries to replace instances in bulk with components from another library (Figma Help Center).
Keeping Figma Icons in Sync With Code
Icons stay in sync with code when one owner controls the main components, component names match exported file names, and every change travels through one export path.
Fix the naming rule and grid first, then publish the icon library, and automate export only once manual exports start repeating.
Renames after developers import files break every import path, so naming comes first. Automation comes last because a script only repeats whatever inconsistency the library already holds.
The price is speed. One owner reviewing each new icon slows additions, and that delay buys consistent stroke, radius and names.
Verified in October 2026, this advice changes if Figma’s SVG export stops needing masks for inside and outside strokes.
Teams ready to go beyond icons can build a broader developer handoff workflow around Dev Mode.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- How to Insert Image in Figma With Ease - November 3, 2026
- How to Download Figma Files Fast and Free - October 30, 2026
- Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026
