How To Add Icons in Figma
No user interface would be complete without icons and the silent way they so effectively communicate what words hardly could. Therefore, it’s no wonder they are an essential feature in Figma.
Do you want to learn how to add icons in this app to enhance the intuitiveness of your design? Here’s everything you need to know.
Adding Icons in Figma
There are two main methods for adding icons to Figma. You can download and drag icons to your Figma or streamline the process by installing a plugin.
Add Downloaded Icons
Have you come across the perfect icon on the internet and need it in your workspace? Simply download the file and drag and drop it into the program. If you need to import a lot of files, select them before dragging them, or use the appropriate menu.
- Click the square icon in your Figma toolbar.
- Press “Place image…”
- Select the files you want to import. Click and drag your cursor in your workspace to place the icons. Make sure you hold your Shift button as you do so to maintain the original image ratio.
Install a Plugin
The second (and perhaps more productive) way to add icons to Figma is by installing a plugin. Figma plugins are extensions that add even more functionality to the app. Some of them will smooth out your workflow, while others can be used to add design elements. The plugin feature is available to all users regardless of their Figma plan.
You can find plugins by browsing Figma’s community page. Access this page in one of two ways:
- Go directly to the Community page in your browser.
- Right-click in the Figma app and choose “Browse plugins in Community.”
Choose the “Plugin” or “Icon” tag at the top of the page, and you’ll be able to browse a vast number of selections. Files with a blue pen icon or a half-blue, half-purple icon will be compatible with Figma.
Once you’ve found a plugin you like, install it by simply clicking the blue “Install” button. The plugin will be added to your Figma, and you can start using the icons. Installing a plugin will link it to your account, so you’ll be able to access it from your connected accounts as well.
Here’s how to find your plugins in Figma:
- Open your Figma desktop app or access it in your browser.
- Click the Figma icon in the top left corner.
- Find the “Plugins” option.
- Select the plugin you just downloaded. It will open in a small window.
Each plugin is different; some will offer more options than others. You can typically search for the icon you need in the plugin window. To add an icon to your workspace, just drag and drop it.
How to Add Social Media Icons in Figma
If you want to add social media icons to your Figma design, you can download an icon plugin that includes social media logos. In addition, you can search for social media icons specifically on Figma’s Community page where you’ll find icon files made by other Figma users. You can duplicate and edit these files. Here’s how:
- Right-click in your Figma workspace and click “Community” or go directly to Figma’s Community page.
- Type “social media icons” into the search bar.
- Browse the search results and make sure you select a Figma-compatible file. Hover over the thumbnail to see a small icon in the corner. A blue or half-blue, half-purple icon will signal compatibility.
- Open the entry and then click the blue “Get a copy” icon.
- Click the account you want to add the icons to from the dropdown. This will add the file to your drafts folder and copy the icons you need from the draft into the file you’re working on.
You can change the files to suit your design and even share them later. Nevertheless, remember that these aren’t public domain files, and act accordingly.
In what file format should I upload my Figma icons?
A wide range of file formats can be imported to Figma, but when it comes to icons, make sure you go for SVG format. This file format gives icons flexibility as they’ll be fully customizable. You can edit their size, color, style, and even shape. You can also use other formats if SVG is unavailable for the file you chose – for instance, image files like PNG will also work. However, they are more limited and take up a lot more space, so go for SVG whenever possible.
Where can I find my downloaded icons in Figma?
The location of your Figma icons depends on how you downloaded them.
• If you downloaded an individual file, look in your usual downloads folder.
• If you installed a Figma plugin, you’ll find your icons in the following way:
1. Click the Figma icon in the app’s menu bar and select “Plugins.”
2. The downloaded plugin will be in the dropdown menu.
• If you duplicated an icon set, your icons will be in your Figma drafts.
1. Open the Figma app and make sure you’ve selected your profile.
2. Click “Drafts” in the left sidebar to find your new icons.
Add Icons the Easy Way
A consistent set of icons is paramount for a successful design. Fortunately, Figma’s community plugins and icon sets make consistency a breeze. You can also use other resources to find icons and simply drag them into your workspace.
Have you found your favorite Figma icons yet? Which ones would you recommend? Let us know in the comments below.
Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.