#Icons
Fingerprint icon
Steve Schoger shows how to draw a fingerprint icon using the full power of Figma’s vector networks.
✨ How to draw a fingerprint icon in @figma pic.twitter.com/s6iKbz94RF
— Steve Schoger (@steveschoger) November 3, 2022
Designing in the Open(Source)
Microsoft Design refreshed their entire library of Fluent Emojis last year, and now they’re open-sourcing them on Figma Community (see also parts 2 and 3) and GitHub. A staggering amount of work went into this set of 1,538 emojis and it’s definitely worth exploring. Every icon is available in multiple variants — 3D, flat, and high contrast. Beautiful work!
Netflix icons
Bonnie Kate Wolf designs pictograms for Netflix in Figma.
Designing pictograms for @netflix in @figma
— Bonnie Kate Wolf (@bonniekatewolf) August 2, 2022
Somebody pinch me! pic.twitter.com/Z6U1DZR2Ku
Tabler Icons
A great set with over 2,150 free and open-source icons.
Preserving the color of a swapped icon
Rogie comes to the rescue and explains how to preserve a fill color when icons are overridden and swapped. It’s worth keeping a layer name consistent across icons in the library if you plan to use them in different colors.
To get icon colors to preserve when they are overridden and swapped, you need to make sure that your layer names are the same. You'll see in this gif that add_circle and add_shopping_cart have the same layer name...that's how Figma knows to apply the override as you swap. pic.twitter.com/io8DZFtgBQ
— ˗ˏˋrogieˎˊ (@rogie) July 29, 2022
Ripple Icon Library
A collection of 500+ free icons across 3 styles by Flowbase.
3D Icons Plugin
Vijay Verma’s massive collection of 3D icons is now available as a free plugin.
Memojis
“Select your shapes, and then run the plugin to automatically fill from over 100+ Memojis.”
The power of emoji
A conversation with Jennifer Daniel, a creative director at Google and chair of the Unicode Emoji Subcommittee of the Unicode Consortium, about the effect emoji had on our communication and the process for selecting new emojis.
Microinteractions in UI Design: How to Animate Icons in Figma
In this tutorial, one of the designers from Noun Project gives a few quick tips on using Figma’s “Smart Animate” tool to animate icons in your UI.
Refreshing our Icon System: the why and how behind the changes
Nice write-up on how Spotify updated their icon system and streamlined the contribution flow with Figma. Shaun Bent shares a few more details in his Twitter thread.
10 icon packs from the Figma community to have in your toolkit
Good list of ten very different free icon packs.
Chunk Icons
A set of 144 consistent and commonly-needed glyphs, all tailored to look nice and sharp at 16px.
Ultimate Guide to Using Icons in Figma
Use an IconWrapper to nest icons in your components
Ready for a @figmadesign pro tip?
— Ridd 🏛 (@Ridderingand) August 15, 2021
Use an `IconWrapper` to nest icons in your components.
That way you can always resize your icons without having to detach components, hide layers, or add additional variants.
Here's how it works 👇 pic.twitter.com/rZDEoihWgs
Font Awesome Icon Component
Reminder: never use variants for different icons
Gleb is right – icons as variants can’t be previewed or searched. In fact, Figma doesn’t recommend using variants to group different icons either. If you have different sizes or versions of the same icon, then you could combine these as variants instead.
PSA reminder: never use variants for different icons in @figmadesign!
— Gleb Sabirzyanov (@gleb_sexy) July 7, 2021
Use regular separate components to:
- Preview icons when swapping instances
- Search via name and icon description (bonus tip: add synonyms for easier search)#FigmaTip pic.twitter.com/4oGqs2GxIb