/ How to

How To Add Icons in Figma: Elevating Designs with Stylish Icons

Adding icons to your Figma designs can elevate them to the next level. Icons make designs more visually appealing, easier to navigate, and help convey meaning quickly. In this comprehensive guide, we’ll cover everything you need to know about working with icons in Figma.

Getting Started with Icons

There are a few ways to add icons in Figma:

  • Draw icons from scratch using Figma’s vector tools. This takes more time but allows full customization.
  • Import icon fonts like FontAwesome or Material Icons. This allows you to insert icons with a few keystrokes.
  • Use icon plugins to browse and import icons from large icon libraries. Iconify, Iconscout, and IconJar are great options.
  • Drag and drop icons from your computer or icon sites like flaticon.com.

Once added, you can customize the icon’s color, size, and other properties.

Organizing Your Icons

With lots of icons, organization is key. Here are some tips:

  • Use naming conventions like “icon_home” or “icons_outlined/home”. This keeps icons easy to find.
  • Categorize icons into frames or pages by style or usage. For example, separate filled and outlined icons.
  • Make every icon a component. This allows overriding properties like color or resizing instances.
  • Use icon wrappers to standardize sizes. For example, a 32x32px icon wrapper around a 24x24px home icon.

Styling Icons

Figma offers powerful tools to style icons:

  • Adjust color with fills or by changing instance properties if icons are components.
  • Swap icons by overriding the nested symbol inside a component wrapper.
  • Adjust scale by overriding the icon component or using a resizing wrapper component.
  • Add effects like drop shadows and blurs to make icons stand out.

Exporting Icons

When ready to handoff, optimize icons:

  • Detach icons from text layers if using icon fonts.
  • Export icons individually as SVG/PNGs or generate a sprite sheet.
  • Use icon fonts for inline icons. This keeps icons editable and avoids requests for new assets.

Best Practices

Follow these icon guidelines in Figma:

  • Keep icons and texts as separate layers for editing flexibility.
  • Use icon components, not variants, so properties can be overridden individually.
  • Scale icons proportionally and enlarge touch targets to at least 44x44px.
  • Name icons clearly and consistently, like “icon_home_filled”.
  • Provide all icon states needed, such as default, hover, pressed, and disabled.
  • Use icon wrappers to standardize sizes if icons need to be swapped frequently.

Enhancing Designs with Icons

With this foundation, you can leverage icons to enhance your Figma designs:

  • Guide users by adding icons to show possible actions, like refresh buttons.
  • Communicate meaning quickly by using universal icons people recognize.
  • Break up text-heavy areas by integrating relevant icons to improve scannability.
  • Draw attention to key features by giving them bold icon treatments.
  • Establish hierarchy by varying icon sizes and styles across your UI.
  • Reinforce branding through custom icons with your brand’s visual identity.

So elevate your next Figma project! Import stylish icons from the huge libraries out there or create custom icons tailored to your brand. Follow the tips above and soon you’ll have elegant, iconic interfaces that users will love.

Related Posts