Quick wins for a faster PC:
Free tools Windows power users keep installed
One-click scans. No signup required.
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →
ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
The most useful way to add an icon in Figma is to import it as an SVG. Drag an .svg file onto the canvas, then resize, recolor, edit, or convert it into a component. For larger collections, use a reputable icon plugin; for a team design system, use a shared Figma library. Icon fonts still work, but they are usually less flexible than SVGs.
Choose the right way to add an icon
| What you need | Best method |
|---|---|
| You already have an SVG file | Drag the SVG onto the canvas |
| You need to search many icon families | Use an icon plugin |
| Your team has approved, reusable icons | Enable the team’s Figma library |
| You need one icon from another design tool | Copy and paste it as SVG |
| Your product already uses icon glyphs | Use the installed icon font |
| You need a custom brand symbol | Draw or import the original vector artwork |
SVG is the best general-purpose default because Figma imports it as editable vector artwork rather than as a raster image. It remains sharp when resized and can usually be recolored or edited in the right sidebar. Complex SVG features such as masks, filters, patterns, external styles, and nested compound paths may not remain convenient to edit.
How to add an SVG icon
Drag an SVG file into Figma
- Download an SVG from a source whose license permits your intended use.
- Open a Figma Design file.
- Drag the
.svgfile from your computer onto the canvas. - Position and resize the icon.
- Use the right sidebar to change fills, strokes, opacity, and other vector properties.
- Rename the layer clearly, such as
Icon - Search.
The imported object should appear as a vector layer or group in the Layers panel. It is not the same as placing a PNG or JPG, which is a raster image and is harder to recolor cleanly. Figma’s documentation covers supported image and vector import behavior in its guide to adding images and videos.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsCopy and paste an SVG
If an icon is available in another design tool, copy it as SVG and paste it into Figma. Right-click the canvas and choose Paste here. Figma documents SVG as a lossless format for transferring assets between design tools; some marker and pattern elements may not transfer. See Figma’s copy-assets guidance.
#1 Best Overall
Be careful with websites that offer a “Copy icon” button. The clipboard content may be an SVG object, a Unicode character, HTML, CSS, or an image URL. If it copies raw SVG markup as ordinary text, save or convert that markup into an SVG file before importing it. SVGs that rely on currentColor, external stylesheets, masks, or animation may not render exactly as expected.
How to add icons with a Figma plugin
- Open the file and go to Resources or the current Tools area.
- Filter resources by Plugins.
- Search for the icon plugin you want.
- Open or install the plugin.
- Search for an icon and use its insert command.
- Resize, recolor, and rename the inserted artwork.
Figma’s interface can change, but plugins may be launched from Community, the file browser, or inside a Design file. Organizations can restrict plugins, and plugins must be run manually rather than operating in the background. Check Figma’s plugin documentation if the menu or availability differs.
Iconify
Iconify provides a searchable catalog of many open-source icon sets and a Figma plugin that imports icons as vector shapes. Its documentation describes more than 150 icon sets and more than 200,000 icons, although catalog counts can change.
Iconify is useful when you want to compare families such as Material, Font Awesome, Lucide, and others without downloading each icon separately. Its plugin documentation also notes restrictions, including the inability to drop an icon directly into a component instance in some situations. Insert the icon on the canvas first, then copy it into the editable main component if necessary.
Font Awesome Icons (Official)
Font Awesome’s official plugin requires a Font Awesome account and API token. The workflow is:
- Sign in to or create a Font Awesome account.
- In Figma, open Resources → Plugins, or the equivalent current Tools path.
- Open Font Awesome Icons (Official).
- Create a Font Awesome API token and enter it in the plugin.
- Search for an icon and click the result.
The plugin inserts the icon as an SVG, places it in the center of the current Figma view, and supports size controls from 10 px through 160 px. Free, Pro, Pro+, and custom-kit access are separate; do not assume that every Font Awesome icon is free. See the official plugin documentation.
How to add icons from a Figma library
A shared library is the strongest option when icons belong to a design system. Instead of importing disconnected artwork, designers use component instances that can receive updates from a published source.
Free tools Windows power users keep installed
One-click scans. No signup required.
Enable a library
- Open the file and select the Assets tab.
- Click the Libraries icon.
- Search for the team, organization, or UI-kit library.
- Select it and click Add to file.
- Search for the icon in Assets.
- Drag the icon component onto the canvas.
The library must be published, and you need at least view access. Figma documents this path in its library instructions. The library is available only where your workspace and plan support shared libraries; you can still create local components on the Starter plan, but publishing components for use across files requires paid-plan functionality.
Keep the instance connected unless you have a specific reason to detach it. Use Go to main component when you need to inspect or edit the source. When the published main component changes, Figma can make that update available to files using its instances. See the Figma library guide.
How to use an icon font
Icon fonts are appropriate when an existing product or development system already uses font glyphs. They are less robust than SVG components for most new design-system work.
- Install the icon font in OpenType or TrueType format.
- In Figma, create a text layer.
- Open the font picker in the Text section and select the installed icon font.
- Find and copy the icon’s Unicode glyph.
- Paste it into the text layer with
Command-Von macOS orCtrl-Von Windows. - Choose the correct style, such as Solid or Regular, and adjust the size and color.
The Figma desktop app can use locally installed fonts. Browser users may need Figma’s font helper. If the font does not appear, check the installation and font-loading setup in Figma’s icon-font documentation.
An icon font begins as a text layer, not a vector object. A blank square usually means the selected font or style does not contain that glyph. Switching between Regular and Solid can resolve the problem. Converting the text to outlines makes it a vector, but removes the convenience of changing the glyph as text and can make later editing harder.
Make an icon reusable
Importing an icon is not the same as creating a maintainable icon system. Convert an icon into a component when it will be reused, needs a stable name, or belongs to a design system.
- Select the icon, preferably inside a consistent frame.
- Create a component using Figma’s component control or current keyboard shortcut.
- Use a predictable name, such as
Icon / Navigation / Home,Icon / Action / Search, orIcon / Status / Error. - Add a description covering intended use, style, and any restrictions.
- Use a standard frame such as 16 × 16, 20 × 20, or 24 × 24 when your icon system calls for one.
- Align the artwork optically inside the frame.
- Add constraints or auto-layout behavior if it belongs inside a larger component.
- Publish the file as a library if teammates need it across files.
Do not force every icon into one size. Optical weight, platform conventions, stroke width, and the amount of artwork inside the viewBox all affect how large an icon appears. Two icons in 24 × 24 frames may still look mismatched if one uses more of its canvas or has a heavier stroke.
Rank #3
Keep an icon as a standalone vector when it is a one-off illustration, an experiment, or artwork that will be substantially redrawn. Avoid detaching library instances unless you need to break the connection deliberately.
SVG, plugin, library, or icon font?
| Method | Editability | Reuse | Main trade-off |
|---|---|---|---|
| SVG | Usually editable vector artwork | Good after conversion to a component | Complex SVG features may import imperfectly |
| Plugin | Depends on what it inserts; reputable icon plugins usually insert vectors | Good, if standardized afterward | Plugin maintenance, permissions, accounts, and licensing vary |
| Figma library | Component instance with controlled overrides | Best for teams | Requires publishing, permissions, governance, and supported plan access |
| Icon font | Starts as text | Useful for text-based systems | Requires local font installation and glyph lookup |
| PNG or JPG | Not vector-editable | Poor for interface icons | Can blur when enlarged and is difficult to recolor |
Troubleshoot common icon problems
The icon is blurry
You probably imported a PNG or JPG, or enlarged a raster asset beyond its native resolution. Replace it with an SVG or recreate it as vector artwork.
The icon is invisible
Check the fill color, opacity, layer order, and visibility. For a font glyph, confirm that the correct font and style are selected. An SVG that uses currentColor or external CSS may have lost its intended color during import.
The icon is the wrong color
Select the vector paths and change their fills or strokes. If the icon is a component instance, the component may expose only certain color properties. A font icon takes the text color. If the source uses several fills, recolor each relevant path or use the component’s supported properties.
The SVG is difficult to edit
Inspect the layer hierarchy before ungrouping. Nested groups, compound paths, masks, and effects can make an SVG awkward to modify. Try a simpler version from the same icon set. Ungroup only what you need, and use flattening cautiously because it can remove editability.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →The icon has unexpected whitespace
Inspect the icon’s frame and SVG viewBox. Some files crop tightly to the artwork; others use a consistent square canvas with intentional surrounding space. Do not compensate by arbitrarily scaling the icon until you know whether the whitespace is part of the source convention.
The plugin is missing
Confirm that you found a plugin rather than a template or widget, that the file type supports it, and that your organization has not blocked it. You may also need to install or open it in the current file and have the required access or seat. Plugin availability can vary by product, plan, and organization policy.
The icon cannot be inserted into a component instance
Some plugin operations are limited by Figma’s plugin system. Insert the icon on the canvas, copy it, open the main component or an editable nested layer, and paste or replace the existing vector there. Preserve the component’s naming, properties, and layout behavior.
Icons look inconsistent
Mixed families, stroke widths, corner styles, filled and outlined styles, viewBox conventions, and baseline alignment are common causes. Choose one family where possible and define rules for canvas size, stroke width, corner treatment, optical alignment, color, naming, and export format.
Check the icon license
“Free to download” does not necessarily mean free for every use. Before using an icon commercially or distributing it in a product, check:
- Whether commercial use is allowed.
- Whether attribution is required.
- Whether modifying the artwork is allowed.
- Whether redistributing source files is restricted.
- Whether the license applies to the artwork, plugin, font, or all three.
- Whether a paid account grants access without transferring ownership of the artwork.
Figma Community resources can carry different licenses, and creators may add or replace default Community license terms. Review Figma’s copyright and licensing guidance and the icon set’s own license. Paid plugins and resources may also use different checkout and refund arrangements; see Figma’s purchase guidance.
Best practice for a Figma icon system
For a personal mockup, drag in an SVG and continue designing. For a team system, choose one controlled icon family, standardize its frame and optical rules, convert icons into named components, document their intended use, and publish a maintained library. Use plugins for discovery, but review and normalize the resulting artwork before adding it to the system.
Start with a free SVG or reputable free plugin. Consider a paid icon collection, plugin, or Figma plan only when you need custom icons, broader licensing support, governed updates, team reuse, or a larger-scale workflow. Figma’s current plans and pricing are listed at figma.com/pricing; pricing and plan packaging can change.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
