How to Use Iconify in Figma: Quick Guide
To use
Iconify in Figma, install the Iconify plugin from the Figma Community, then open it inside your design file to search and insert icons directly. You can customize icon size and color before placing them on your canvas.Syntax
The basic steps to use Iconify in Figma are:
- Install Plugin: Search for
Iconifyin Figma Community and click Install. - Open Plugin: In your Figma file, go to Plugins > Iconify.
- Search Icons: Use the search bar to find icons by name or category.
- Insert Icon: Click an icon to add it to your canvas.
- Customize: Adjust size, color, and position as needed.
text
1. Install Iconify plugin from Figma Community 2. Open your Figma file 3. Go to Plugins > Iconify 4. Search for an icon (e.g., 'home') 5. Click the icon to insert it 6. Resize or recolor the icon on canvas
Example
This example shows how to add a 'search' icon using Iconify in Figma:
- Open your Figma design file.
- Run the Iconify plugin from the Plugins menu.
- Type 'search' in the search box.
- Click the magnifying glass icon from the results.
- The icon appears on your canvas, ready to resize or recolor.
text
Open Figma file
Run Plugins > Iconify
Search: "search"
Click icon to insert
Resize or recolor as neededOutput
A magnifying glass icon appears on the canvas, sized at default 24x24 pixels, editable like any vector shape.
Common Pitfalls
Some common mistakes when using Iconify in Figma include:
- Not installing the plugin before trying to use it.
- Searching with vague terms that return too many results.
- Forgetting to resize or recolor icons after insertion, leading to inconsistent design.
- Trying to edit icons as raster images instead of vectors.
Always ensure you insert icons as vectors and customize them to fit your design style.
text
Wrong: Trying to paste icon code directly into Figma Right: Use the Iconify plugin to search and insert icons as vector shapes
Quick Reference
| Step | Action |
|---|---|
| 1 | Install Iconify plugin from Figma Community |
| 2 | Open your design file in Figma |
| 3 | Run Iconify from Plugins menu |
| 4 | Search for icon by name or category |
| 5 | Click icon to insert on canvas |
| 6 | Resize and recolor icon as needed |
Key Takeaways
Install the Iconify plugin from Figma Community before use.
Use clear search terms to find icons quickly.
Insert icons as vectors to keep them editable.
Customize icon size and color after insertion.
Avoid trying to paste icon code directly into Figma.