You'll need to update the font style in Figma to match:

Use the tabs at the top of the page to choose between Solid or Regular Font Awesome icons.

View and copy icons from the Font Awesome cheatsheet. Font Awesome is free to use, or you can purchase an extended range of icons.įont Awesome has both regular or solid versions of an icon. If an icon isn't showing up when you paste it, you may need to switch to the solid style to see the icon. Font Awesome iconsīy default, Figma supports Font Awesome, a popular set of icons in an easy-to-use font. Like regular text, icon fonts can be styled using CSS, which makes them popular in web development. Icon fonts are fonts that are made up of symbols, as opposed to regular letters and numbers. You can add icons to your designs as actual images, or use an icon font. Icons are images or symbols that represent specific actions or tools in an interface. For this reason, it is not recommended for the web.You will need to have can edit access to a file to edit any text layers. It cannot have a transparent background and its dimensions are fixed making the quality lower. This is the next best choice for the web. It allows the export to have a transparent background and maintain high quality when compressed. SVGs can also be represented in scripts or code, making them the best choice for the web. It allows exports to have a transparent background and scale up/down without any loss of quality.

Select the ' +' symbol multiple times to export multiple different formats at once. Then choose your preferred format and select ' Export X layers'. To export icons, select each of their frames and click the ' +' symbol next to 'Export' in the Design Panel. Export iconsĮxport icons as an SVG, PNG, or JPEG. This can be done by exporting all the icons, creating a spritesheet, or using an icon font (most recommended). To make things even easier for them prepare the icon assets in advance.

When it's time to handoff the designs, developers can inspect and export icons as needed from the Figma file. up/down/left/right arrows), or icons that will have hover/click prototype behaviors (e.g. This is only recommended for icons that are part of a set (ie. Pro tip: Combine like icons as variants for faster instance swapping and the ability to use Interactive Components.

Select all icons and click 'create multiple components' in the toolbar.

Use the forward slash ('/') naming method for categories of icons (e.g. It also adds the same nesting hierarchy in the Asset Panel as writing 'Icon/' at the beginning of every name.

Place all icons on a frame labeled 'Icon'.

Edit the one main component rather than hunting down every icon in your designs. It also makes bulk updates to your icons MUCH faster. This makes finding, adding, and swapping icons easier. Turn every icon into a main component to use instances of them across your designs. UI Prep Design System Turn into Main components

Cool google icons