Best UI Icon Libraries

June 20, 2023 - Reading time: 15 minutes

In UI design, iconography plays a crucial role. Icons convey a message and have a unique brand voice in your designs.

But with so many free and suitable icons available, drawing vectors around could be a waste of time to draw icons for an already established visual metaphor. Also, icons tend to change in product design, where a design system evolves along the project, requiring numerous revisions and manual scribbling. That's why starting with an established icon library is a good idea for any project.

To help you with that, we've gathered our top picks of high-quality free libraries that can easily be dragged and dropped into your project and save your creative hours.

NOTE: The icon count is based on the current timestamp of the article. Save this article to your favorites for future updates.

Updated: 03.04.24

Free Icon Libraries

Atlas Icons ↗

Open-source icon library, available in variable stroke SVG format, web font, Figma, React, Vue, and Flutter ready-to-use packages.

Icons: 2701

Boxicons ↗

Simple open-source icons are carefully crafted for designers and developers in four styles.

Icons: 1634

Basic Icons ↗

Open-source icon set icons for user interfaces. Based on a 24px grid.

Icons: 326

Clickons ↗

Open-source icon library by Craftwork in two styles.

Icons: 500

CSS Icons ↗

Open-source icons in CSS, SVG, Figma, and SVG formats.

Icons: 700

Free Font Awesome Icons ↗

All free Font Awesome icons are in one place.

Icons: 2020

Flagpack ↗

Open-source countries icon flags for Sketch, Figma, React, Vue, and Svetle.

Icons: 250

Flowbite Icons ↗

Free and open-source SVG icons in solid and outline styles with React (JSX) and Figma support.

Icons: 460

Glyph Neue ↗

Free with attribution icon pack by Icons 8 in outline style.

Icons: 1500

Hero Icons ↗

MIT licensed open-source icon library by makers of Tailwind UI in three styles, available for Figma, React, and Vue.

Icons: 292

Humble Icons ↗

Icons in a neutral style, carefully crafted in Figma and code.

Icons: 235

Icon Park by ByteDance ↗

Extensive collection of free open-source icons with a focus on customization and styling.

Icons: 2600

Icon Duck ↗

A vast collection of free icons and illustrations are available for download in SVG and PNG format.

Icons: 306,832

Icon Hub ↗

Collection of free and practical icons designed in multiple sizes and stroke sizes.

Icons: 3328

Iconmonstr ↗

A massive collection of free icons packed into thematic collections.

Icons: 4784

Iconoir ↗

A large-high-quality collection of minimal-styled icons.

Icons: 1356

Remix Icons ↗

Open-source neutral-style icon pack for modern interfaces with a handy Figma plugin.

Icons: 2494

Tabler Icons ↗

Free icon pack designed in a single style for web apps and user interfaces.

Icons: 4300

Material Symbols ↗

Free icon by Google available in font format. Available for customization in three styles and four font variables.

Icons: 2990

Majesticons ↗

A consistent icon pack for UI with free MIT license icons in two styles.

Icons: 6400

Mingcute Icons ↗

A simple and extensive set of minimal-styled icons.

Icons: 2326

Phosphor Icons

An extensive and constantly updated flexible icon pack for user interfaces.

Icons: 7488

Pixelart Icons ↗

Open-source pixel-art style icons made in one color on a 24px grid.

Icons: 480

Premium Icon Libraries

Icons8 ↗

A company focused on producing high-quality icons, graphics, and tools for digital creators.

It is one of the best sources for icon packs and illustration assets. Icons8 provides a wide variety of icons, from the most commonly used user and close icons to extraordinary Adventure Time icons

Icons: 1,345,700

UntitledUI Icons ↗

An extensive collection of clean and consistent icons for a modern-looking UI.

Made in 4 styles and carefully crafted in Figma.

Icons: 4600+

Pikaicons ↗

A growing icon pack made with extreme care in a smooth style.

Available in 5 styles. Provides monthly-community-driven updates.

Icons: 3,700+

Central Icon System ↗

Icon system designed to maximally utilize Figma features to offer a fully customizable icon pack.

Includes 30 styles per single icon.

Icons: 818+

Iconic ↗

A growing icon pack for modern and minimal-looking UI with weekly updates.

Icons are available in SVG format.

Icons: 1258+

Myicons ↗

A massive and monthly growing icon pack for a clean-looking UI.

Available for Figma and Sketch.

Icons: 14,500+

Anron Icons ↗

A flexible and clean icon set designed specifically for Figma.

Available in 6 styles.

Icons: 5000+

Dazzle UI Icons ↗

A vast and sharp icon pack in four styles. Specially designed with integrated Figma best practices.

Icons: 6,800+

Conclusion

You might be overwhelmed with how many packs to choose from as a designer or developer. But there is even more to find on the web. That's why we think these free and premium options are worthy of your attention.

Featured premium icon sets are usually designed with extensive customization options, making them an excellent choice for businesses and individuals seeking exclusivity. These sets often come with additional features, such as support and updates, which is valuable for long-term projects.

On the other hand, free icon sets provide a cost-effective solution for those on a budget or looking for a quick fix. They offer a diverse selection of icons that cater to various design styles and purposes. They can also be a great starting point for beginners experimenting with different visual elements.

Thanks for the read!

Figma Tips to Design Faster

October 4, 2022 - Reading time: 14 minutes

Intro

Learning Figma can be challenging but rewarding, especially if you are a professional freelancer or working in a team. Mastering your tool's best practices could save time and help you achieve results much faster! 

To help you with that, we've collected our top-tier best practices for designing faster in Figma. This is an evergrowing list, so consider bookmarking and revisiting this page occasionally for new hacks and updated tips.

Use the quick actions command

Access your recent actions, plugins, and all available commands in Figma. All from one place.

1. Use the shortcut: Mac: ⌘ CMD + / or ⌘ CMD + P. Windows: Control + / or Control + P;
2. Navigate the results with ↑ or ↓ on your keyboard;
3. Press Enter to execute the desired action;
4. Enjoy saving 0.00000000001 of your lifetime.

Use shortcuts to navigate components

When trying to dig into a component, the designer must spend time hunting pixels and clicking the correct layer. Instead, it's faster to use the following shortcuts to navigate the component's layers with a mouse-free approach.

1. Use Enter to drill down through the Layers panel elements quickly;
2. Use the Tab key to jump-navigate the list of layers from up to down;
3. Use ⇧ Shift + Tab to return to a previous layer;
4. Use ⇧ Shift + Enter to return to an upper level.

Tag styles to find them faster

When designing an app or website, you'll eventually have a certain number of styles used more frequently. To speed up finding and utilizing those styles in Figma, you could add a special symbol or a [tag] to the style name to filter and find the needed colors, texts, or effects styles much faster.

For example, the Frames X design system uses '$' (a string) as a prefix to all prior elements, marking them and making it easy to find the baseline styles.

Apply auto layout for flexible containers

Use Auto Layout when needed to remove additional hassles caused when changing the spacings and paddings for your design elements. Adding auto layout to a group or a frame will override its default spacing values and make elements follow a specific direction and adjustable distribution order. 

In general, assembling components with AL will provide a solid building block experience and eliminate unnecessary mistakes.

To add the auto layout, select a group or frame, and use the keyboard shortcut ⇧ Shift + A to apply it. Or click ➕ next to the auto layout label in the right panel.

Use variants to have fewer components

Variants in Figma is a feature to outline your component structures to a single "slash" /category (Slash naming method) instead of having a separate component for each subcategory or instance state.

For example, you could create different components for various states and sizes. Or you can use variants to organize all sibling components under a single state or size category. Applying variants is recommended when a component switches between different states or has multiple variations. Elements like buttons, inputs, and toggles are all perfectly fit for variants.

Variants simplify the design system structure, allowing you to find and use needed components in the assets menu faster. And variants reduce the number of components you need to maintain in the long run.

Note: not every component set should have variants. It's up to you to decide whether variants should be involved or not, based on how somebody will operate the component you made. Here is a nicely written article on that particular topic.

Streamline changes with base components

A base component is a structural element that can help streamline changes to other components. A base component always syncs with its children's instances and saves your day from spending lots of time iterating, testing, and tweaking your designs.

To start using the base, you need to:

1. Create a component (A) and nest it into another component (B);
2. Duplicate component (B) to create alternative variants or different types/states (C, D, E, etc.);
3. Manipulate component (A) to propagate changes to all included variants.

Use component properties

Component properties are unique values assigned to individual component layers.

Properties remove the need to select and override layers manually within the layers menu, saving the time to customize your designs. You can spend time engineering several properties together and have fewer variants and a more versatile component set to fit any design iteration.

Please visit the official blog to learn more about each property type and how you can use them.

Use nested instances

You can expose nested components' properties within another component to access them faster.

For example, if you have a menu component where each menu item is an instance and has its properties. You can make them visible from the main level of a component. Nested instances let you control nested components without drilling into the layer panel.

To add/expose nested instances, select a variant group, press ➕ next to Properties, and select "Nested instances."

Use the quick insert menu

Insert components with your keyboard. Use the quick insert menu to find and drop available components to your canvas.

Use a shortcut ⇧ Shift + I to open the quick insert menu.

Grab your teammates' attention

You can send a message from your cursor in Figma to quickly grab people's attention when pitching your design ideas.

To enter the cursor chat mode: Deselect everything on the canvas and press / the keyboard. Press Enter/Return to clear the chat and type a new message.

Copy/paste with shortcuts

Use Option ⌥ + ⇧ Shift + C to copy the layer style properties and Option ⌥ + ⇧ Shift + V to paste them into another object. 

Combine elements into frames

Instead of grouping the elements, you can frame them to have more control over the resizing constraints. 

To put elements within a frame, use the following shortcut:

• On Mac: CMD ⌘ + Option ⌥ + G;
• On Windows: CTRL + Alt + G.

Adjust the nudge amount to your tasks

Set a custom amount for your small or big nudges. It's popular to recommend aligning the nudge with the grid. But I think adapting it to your current routine is much better.

You can change the default nudge by using the Quick Actions (CMD ⌘ + /) menu and typing "nudge." Or from the main Figma menu: Preferences - Nudge amount.

Quickly find and replace text in Figma files

Use the shortcut: Mac: CMD ⌘ + F or Windows: CTRL+ F to trigger the search box UI and search your file for text, layers, objects, and more. Use shortcuts: CMD ⌘ + ⇧ Shift + D to see the previous result, and CMD ⌘ + ⇧ Shift + F to see the following result in the list.

You can replace the located text layer or object name using the Replace commands. You can also use the Find command to find any object in Figma based on its type. This is useful when you've forgotten where a specific object is located and want to spot it faster.

Use a ready-made UI kit to speed up your workflow

Another great way to speed up your design process is to use a pre-designed library, UI kit, or design system. A good UI kit will help you find a solution to your design problems much faster and simplify your team's life. Sounds good, right?

You can build your UI kit. Or use a premium UI kit with all elements and patterns already included. But, a good UI kit is hard to find, with many solutions built solely for decorative or inspirational purposes.

That's why we build Frames X, a universal UI kit and an evergrowing handbook to help you streamline your process with tons of pre-designed content, practical tips, and building blocks to create your project faster. If you are curious to learn more about it, be welcome to visit the official page.

Frames X — UI Kit & Design Handbook for Figma ↗

Figma Plugins for Design Systems

May 30, 2022 - Reading time: 21 minutes

Intro

Designing systems in Figma can be a stressful and uncertain process. But gladly, Figma has a healthy plugin community to save us from numerous struggles. 

Plugins are great tools to integrate into your design process; they can solve the project's particular pain points or automate things so you can spend less time on monotonous mouse clicking and dragging rectangles around. 

Yet not all plugins are equally good. Some could be outdated or not fit for scaling projects, but some could elevate and change the way you design. So here are my collection of the best plugins to help you design, manage and operate systems in Figma.

Figma Tokens

The Figma tokens plugin lets you create design tokens based on your project's color, typography, and global values, such as border-radius, spacing, etc. Tokens grant many levers of control over your design system. This includes the ability to theme your UI, update particular stylistic details, or modify the whole system with a few commands.

To get started, you can launch the plugin and generate tokens from your file or upload your JSON to bring existing tokens to a new project.

Figma doesn't have a way to export/import styles when you need to use existing styles in another project, and Figma Tokens has an undercover feature to solve this. You could export styles from one file and then import them as JSON into a different one. 

Figma tokens is a free plugin with a pro plan alongside advanced features.

Figma Tokens ↗

Batch Styler

The Batch Styler plugin fills another missing Figma functionality and lets you modify multiple text and color styles at once. With this plugin's UI, you could easily batch update color and typography, plus delete or rename your file styles.

Batch Styler ↗

Similayer

Similayer is a crazy powerful extension for selecting objects in Figma.

This plugin comes in handy when changing specific component details or variants. To use it: select a layer, and run the plugin to find and select all other layers based on needed properties.

Similayer ↗

Instance Finder

A true savior when you need to find out where a specific instance of a component is located. Use Instance Finder whenever you need to find an old dusty component linking to an outdated or someone else file.

Instance Finder ↗

Master

Master is a helpful plugin for moving a design system to a different file/project or migrating your design files from another tool, like Sketch or Adobe XD.

Master can create, clone, and move components between files. Besides that, Master can create a new component from any object on your canvas. This especially comes in handy when you decide to systematize your draft designs into a structured file.

Master is a paid plugin but has a helpful free guide to help you get on board and decide if you need it or not.

Master for Figma ↗

Style Organizer

A plugin to audit your design system. This helpful tool lets you merge similar styles, solve inconsistencies and polish your design styles to perfection.

Style Organizer ↗

Design System Organizer

Design System Organizer helps to manage your components and styles. With its help, you can easily arrange files, copy styles between files, and bulk update component instances.  

The plugin supports working with local and external libraries and has a helpful context menu to help you organize, delete, and group components and styles. DSO is a paid plugin with a 15-day free trial for each new file.

Design System Organizer ↗

Appearance

The Appearance plugin helps generate a dark/light theme from your UI kit styles. The plugin can apply color themes to your selection and switch styles from one theme to another in real time. The plugin supports external libraries, which makes it extremely helpful when you create multi-themed designs in Figma.

Appearance ↗

Contrast

The Contrast plugin is a tool to ensure your designs are passing the Web Content Accessibility Guidelines (WCAG).

To use it: select a layer and run the plugin. The plugin will instantly analyze the background behind your selection and display the contrast ratio between foreground and background.

As a bonus, you could use the Contrast plugin to generate a report of all contrast issues in your file, with an option to fix them.

Contrast ↗

Clean Document

A plugin with a toolset to organize and clean up your files before handing your design system for a review or handoff.

The plugin includes the following features: delete hidden layers, ungroup single-layer groups, make pixel-perfect designs, smart rename, sort layers, and more to help polish your Figma document.

Clean Document ↗

Change Text

Change Text plugin can bulk edit text contents. Select multiple text layers and run the plugin to change their contents. The plugin has a nice results preview to help you avoid typos.

Change Text ↗

Supa Palette

Supa Palette is a powerful color editor and generator. Use it to create beautiful and accessible-first palettes in no time effortlessly. The plugin has a very friendly UI and a premium plan with more features to control your design system color styles.

Supa Palette ↗

Automator

Automator is the most powerful plugin on the list. Its capabilities are much beyond possible description; it allows you to build plugins right inside Figma. You could choose from over 100 actions (commands) to mix and match them, create automations, and experiment with the Figma Plugin API.

To first test using the plugin, you could explore its growing community and use one of the templates to understand its logic and functionality on a specific task.

Automator ↗

Data Lab

A plugin to help generate random or actual data into your designs. This includes user names, dates, addresses, cities, emails, etc. This plugin works with text layers and components, making it helpful for populating your design system with real data examples.

Data Lab ↗

Stark

Stark plugin can check your designs on accessibility standards, including vision impairment and contrast disabilities simulations. If you are designing a product and want to make it accessible for everyone, you could use this plugin to analyze and enhance your designs.

Stark ↗

Design Lint

Design lint is an open-source plugin that finds missing or inconsistent use of styles in your design files. The plugin highlights the most common errors before handing your files into development. 

You could use it to navigate your work and revise errors by various categories, such as missing fills or text styles, inconsistent shadows or border-radius usage, etc.

Design Lint ↗

Measure

A plugin to quickly generate redlines and add size measurements to your designs. A lovely plugin to help you better communicate with developers.

Measure ↗

Themer

Themer is another excellent plugin that enables you to make and swap themes from a published team library. You could use it to apply colors, text, and effect styles to the whole page or your selection.

Themer ↗

Minimap

Minimap is a beautiful plugin that generates a map from your designs. It creates a preview of the file that you can use to see the whole picture and navigate any distant part of your designs with a click. 

Minimap ↗

Selection Variants

Selection Variants let you see and control all nested variants instances within your selection. Use it to switch between variants without clicking through components to find all the nested instances. 

Use this plugin to help others discover how your components work and remove unnecessary complexity from your design system.

Selection Variants ↗

Super Tidy

Super tidy helps to keep your designs neat by efficiently aligning, renaming, and reordering objects based on their canvas position. This plugin is excellent when arranging numerous variants and component examples on the canvas.

Super Tidy ↗

Conclusion

These are just a few plugins we think are worthy of your attention. With so many great plugins appearing, we can honestly say as designers, our life is getting easier each day. Save this list to your favorites and share it with others to help them on their Figma journey. 

If you have a plugin and want to add it to this list, you can DM me on Twitter. Cheers!