How Do I Add an Icon in Figma?

To add an icon in Figma, you can follow a few simple steps. Icons are a great way to enhance the visual appeal of your designs and provide users with visual cues. Let's dive right in!

Step 1: Open Figma and create a new or open an existing project.

Step 2: Create a new frame or select the frame where you want to add the icon. Icons are usually placed within frames to keep them organized.

Step 3: In the left sidebar, click on the "Assets" tab. This is where you'll find pre-built icons or create your own custom ones.

Step 4: If you want to use pre-built icons, click on the "Community" tab under Assets. Here, you can search for icons created by other designers. Simply type in relevant keywords and explore various styles and options.

Step 5: Once you find an icon you like, hover over it, and click on the "+" button to add it to your project. The icon will be added as a component.

Step 6: If you prefer creating custom icons, click on the "Design" tab under Assets. Here, you can use Figma's powerful vector editing tools to create your own unique icons.

Note: To create custom icons, you can draw shapes using the Pen tool or combine existing shapes using boolean operations like Union, Subtract, Intersect, or Exclude.

Step 7: Select the icon component from either the Community or Design section and drag it onto your frame. You can resize and position it as per your requirements.

Now that you have added an icon to your design, let's explore some additional features in Figma to further enhance its appearance:

Figma Styles:

Figma allows you to create and apply styles to your icons for consistency throughout your design. To create a style, select the icon and click on the "Create Style" button in the right sidebar. Give your style a name, choose your preferred properties like fill color, stroke, and effects, and save it.

To apply a style to an icon, simply select it and click on the desired style in the "Styles" panel.

Variants:

In Figma, you can also create variants of an icon to represent different states or purposes. For example, you can have a variant for normal state and another for hover or active state.

To create variants, select the icon component and click on the "Create Variant" button in the right sidebar. Customize the variant with different colors or styles to represent various states.

Exporting Icons:

Once you're satisfied with your icon design, you can export it in various formats like SVG, PNG, PDF, or JPG. To do this:

Step 1: Select the icon component.

Step 2: In the right sidebar, click on the "Export" tab.

Step 3: Choose your desired format from the dropdown menu.

Step 4: Set other export options like size and quality if necessary.

Step 5: Click on the "Export Icon" button to save it to your preferred location.

And there you have it! You've successfully added an icon in Figma.

Experiment with different styles, variants, and export options to create visually stunning icons for your designs. Happy designing!