<?xml version="1.0" encoding="utf-8"?>

Using icons in Figma

Using icons in Figma

Icons are not merely decorative elements in designs; they play a crucial role in enhancing navigation and improving the overall user experience. In Figma, you can access a variety of icons from its built-in icon library with the help of the Font Awesome cheatsheet or use plugins such as Feather Icons or Material Design Icons.

If you're working on a larger design in Figma, you can easily reuse icons by converting them into components. Simply select the icon and click the "Create Component" icon in the top toolbar, or use the shortcut “Option + Command + K” (on Mac) or “Ctrl + Alt + K (on Windows).” For vector icons, make sure to select the entire group or frame that represents the icon.

When using the component, remember to use its instances and not the main component. You can duplicate the component by holding the Option key (on Mac) or Alt key (on Windows) and dragging the icon. Alternatively, you can copy and paste an icon using the familiar shortcuts “Command + C” and “Command + V” (on Mac) or “Ctrl C/Ctrl V” (on Windows). By utilizing components, you can save time and maintain consistency throughout your design.

Improve your UX & Product skills with interactive courses that actually work