Juno Jo kicked off the first Friends of Figma Atlanta event of the year with a guide through the process of constructing a consistent icon library for your projects. In his presentation, Juno explores how to harness the power of Variables to begin tokenizing your system, elevating your design workflow to new heights.
A guide to creating icons in Figma with a solid introduction to basic tools, grids, and approaches to designing a cohesive set.
“App icon template for iOS 17. See your app icon in context. Editable app icons so you can borrow shapes and styles for your own creations. Made in P3 color space to assure accurate colors.”
Figicon is a free collection of thousands of minimal icons. All icons are available in SVG, based on a 24-pixel grid with a 1.5‑pixel stroke, and include a set of brand logos and all country flags. Product Hunt’s recent 2nd Product of the Day.
Cool design explorations of isometric icons inspired by VisionOS.
Molly suggests it’s time to support multiple icon sizes with number variables.
Q: Are icon wrappers still worth using?
— Molly Hellmuth (@molly_hellmuth) February 8, 2024
A: I don’t think so. A much easier way to support multiple icon sizes is with number variables!
Here’s how.. pic.twitter.com/Ue3n9FKYUB
“A collection of icons that will make your product design easier and faster. With over 1000 symbols in 30 variations each, you have more than 30,000 icons at your disposal.” Made by iconists.
A new version of a beautiful free icon set from Noah Jacobus. Now comes in 3 flavors — Filled, Hollow, and Duo. All 300 glyphs from v2 were redrawn for consistency and 300 brand new icons were added.
Multiple icon collections by Zlatko Najdenovski, including a few free ones. Most of them are very expressive and unique.
The official Font Awesome Icons plugin is here! The free part of the collection was always available as a font in Figma, and they shared a popular icon component in the community, but the plugin provides full access to the Font Awesome account, search, and tens of thousands of icons in SVG format.
Vijay challenged himself to create a small set of icons in 2 minutes — that’s just 12 seconds per icon! My takeaway is the importance of a good starting grid template (like this one from Font Awesome) that saves a ton of time and helps with consistency.
Last night decided to create 10 icons in 2 minutes as a challenge. Here is the live result/tutorial⏲️. Upload & download icons were a real timesaver; otherwise, it would have been hard.
— vijay verma (@realvjy) December 12, 2023
Who's next? @miggi, are you up for it?
Shared some more insight below - pic.twitter.com/8doERA5zrA
Huge Icons shows how to quickly create a few common icons using a standard grid.
Drawing file and doc icons in seconds ✨in Figma pic.twitter.com/jsBnUCcXuM
— Huge Icons (@huge_icons) December 5, 2023
A good-looking set of icons made for Figma and Framer, with a unique business model — pay once and request custom icons in the future with no additional charge. A free set consists of 100 high-quality icons.
Atlas Icons is a free and open-source library of 2,000+ icons designed at 12px scale in 3 weights.
Step 1: Learn from Miggi how to create a ghost icon just in time for Spooky Season.
“To replace one icon with another, press and hold Command-Option while dragging a component onto an existing component in your document.”
✨ Figma Tip ✨
— Dima Groshev (@dimagroshev) September 26, 2023
Replacing icons
To replace one icon with another, press and hold Command+Option while dragging a component onto an existing component in your document.#figma @figma pic.twitter.com/efwNnx3DBJ
Export icons from Figma straight to React, Vue, or Svelte components.
Blend Icons offer 137,000 free icons in more than 1,300 collections of 7 different styles.
Flowbite Icons is a collection of 437 free and open-source SVG icons built for the Flowbite Ecosystem.
A beautiful set of 24 retro-inspired icons by Adanna in multiple customizable themes.