How to find the best icons for web design & UI design
Discover free icon libraries to make your website and app UX more user-friendly
You can find lots of libraries online offering premium icons and free icon sets. Sometimes it can feel difficult to find the right ones for your user interface design. Today we want to help you identify some popular options at no cost to you.
Getting started
The visuals used for your website will add to your user interface (ui) design. Start by identifying the fonts for your web design. You will want your icons & font-family to work well together. Test your icons with and without text to see if they are clear.
We believe the right symbols are easy to quickly identify and understand. Letting users interact with your website confidently. Consider a few of the following details when looking at your text and icon files together.
Target Audience
Consider who you are designing your user interface for. By using icons consistent with your brand that your target audience understands. Your brand's fonts and icons should work together to convey the intended meaning effectively.
Contrast
When designing websites and digital products, keep usability in mind. Use tools to check your contrast ratio for inclusive design. You can test your text and graphical user interfaces (GUI) for their WCAG rating.
Solid, Duotone or Outlined
Graphic designers often use single-color icons, which make it easier to match UI designs. Outline icons show the border of the shape, and may show more detail to clarify the symbol. Filled icons use a color to complete a shape, potentially using cutouts for more detail. Duotone icons use half-tones to get a blend of filled and outline styling.
Weight
When using outline icon formats, consider how the font and icon weights work together. Some icon libraries have set weights, while others let users edit the outline's stroke. Test out what treatment works best for each of your use cases.
Full color
Using multiple colors for an icon is a great way to use your brand colors. Bring life to your website or any type of user interface with user-friendly colors. If you use colors, consider testing the contrast ratio for usability.
Perspective
The design of an icon may be flat or 3 dimensional. In some cases a 3d icon may include a shadow to increase the depth of field. When using symbols in your design, consider keeping your icons consistent. This will help your design feel intentional, and easier to scan.
Use cases
Think about what your icons are conveying to users. If there are different use cases, you may want to use styles to communicate different things. Styling can improve your information architecture (IA) by serving as a visual cue for users.
Icon sizes
Make sure to test your user interfaces to address your viewer's device size. Make sure your icons are visible and easy-to-understand on every screen size. Use your favorite UI design tool to test things out before committing to an icon treatment.
File format
The type of icon file you use will depend on a few factors. Vector icons are loss-less, meaning they do not change resolution as they resize. One benefit of SVG icons, is the ability to adjust the icon color with CSS. Another option is a transparent PNG, which may require multiple versions to account for different colors and sizes.
Where to find free icons for web user interface design
Commonly used icon sets
Access the same icons Google uses across their mobile, web, and auto products. The Material icons are available on the Google Font website. Viewer's have controls to modify the icon size and color. Download options include copying SVG code or downloading icon files (SVG or PNG format).
Selecting an icon presents you with options for embedding icons on web, Android, and Apple devices. We've used this icon set for apps across different operating systems. They have icons for nearly any use case, categorized clearly on their site.
Font Awesome offers over 2,000 free icons in addition to a robust premium icon set. Users can download filled, regular, thin, or light versions of free icons. If you need an icon for a major brand, font-awesome has over 450 branded icons.
Clicking on an icon to get embed codes for HTML, react, and vue sites. They also offer an option to copy and paste the raw SVG code. Unlock over 53,000 icons with the pro version.
Our client favorites
Phosphor icons offer over 9,000 icons in their library. With quick access to download all of their symbols, and plugins, we find their UX to be user-friendly. Their library includes multiple outline weights, fill and duotone designs. The website states that this set is used by designers from AllTrails, Anthropic, Framer, Threads, and more.
Users have the option to download the full library to use in their design projects. Phophor goes further with Figma and Sketch plugins. There is also an option to request an icon directly on their homepage.
HeroIcons is from the makers of TailwindCSS. It is an elegant icon library, offering outline, fill, mini, and micro variants. The site offers a Figma file of the icon set. Users can also click to copy SVG or JSX icon formats.
Icons from Apple's Human Interface Guideline
Apple's Developer site offers a web app with their full icon library. This gives designers access to all of the icons used on MacOS, WatchOS, iPadOS, and iOS. Although their library is free to use, they are not open source. Make sure you review the Apple licensing terms before using them.
Other free icon libraries
Get free icons from Feather, where you can customize size, stroke, and color. Click on any of their icons to automatically download the 24x24 SVG file. Feather offers an option to download all their icons from the homepage as well.
Wrapping up
Improve usability and ease-of use by using the right icon library in your web design project. This article includes some of our most commonly used icons for websites and SaaS app design. We hope this is a helpful start for your beautiful UI designs.
Test out different options to find the right fit for your design language. While delivering user experiences tailored to your target audience.