When was the last time you paid attention to the icons you pressed when you bought something online? How often do you think about the little images you tap when sending an important email?
Icons are so ingrained into almost every tech-related activity we do that you probably barely notice what they look like – and as we’ll see, that’s a good thing!
Humans have been using icons for hundreds of thousands of years. Early human cave paintings were iconic representations of certain animals in the world. Ancient Egyptian Hieroglyphics represented sounds, words, and ideas and were early adoptions of icons.
While we may not be writing on cave walls anymore, we still use icons today. Looking at your phone, you’ll see your regularly used apps, which you recognize through their icon.
But what are icons? And how do they affect UI design?
What is an icon?
Icons are representations of real-world or abstract ideas, objects, and actions. An example is a warning light that you see in your car. If you’re driving along, and the picture of a petrol pump lights up, you instantly know that you need to fill up with gas. Nobody needs to say the words. You easily understand what the icon represents.
In terms of UI, an icon is ‘a small graphical representation of a program, feature, or file‘. It is an image that a user taps or clicks to proceed with an action. The icon’s purpose is to show the user where to go and give them a way to get there. For example, the image of a printertells you that this is what to press to print a document.
Icons and UI design
Don’t underestimate how important these little icons are for your app.
Your choice of an icon will affect your UI and your UX to your customer.
Icons are used to quickly and easily guide your user through your app. Selecting too abstract, blurry, or even too small icons can create significant problems.
Helena Zhang – the designer of one of the icon sets below – wrote an article on the seven principles of icon design. While all are important, let’s look at the main ones which affect UI design.
First, an icon must be readable. That is, it should be easy for the user to recognize the image. This is especially true when designing apps to be used on small screens. The user won’t understand its purpose if an image is unclear.
Not only does the image need to be clear, but the meaning also needs to be precise. It must be understood quickly by the user. For example, if you own an eCommerce app, you would likely select the picture of a trolley to show the user where to go for checkout. Why? Because that is the most familiar icon used in eCommerce, it will be instantly recognized, making the process more user-friendly.
Finally, icons need to be consistent throughout the app. They should maintain roughly the same size, with lines of the same weight. You may choose between an outlined, filled, or duotone icon. Selecting the same style throughout your app will help your user instantly recognize where they need to go and help build familiarity with your brand.
The four best icon sets to choose from
These are the top four icon sets for web and mobile app UI.
These are open source and completely free for you to use!
Phosphor Icons
Phosphor Icons was designed and built by Helena Zhang and Tobias Fried, and it boasts over 6,200 icons that can be downloaded as PNG or SVG. Phosphor gives you several options to choose from when selecting your icons.
Firstly, you can select whether you want your icon to be an outline, filled, or duotone. If you choose an outline, you can also choose the line’s weight, allowing you to select stronger, bolder images, making them easier to see. You can also change the size of the image- ranging from 16px to 96px – which means you can select icons for various screen sizes.
Phosphor has designed its icons to be ‘multi-purpose, but a little quirky.’ Their designs are simple and consistent, and it’s easy to identify what they represent. Spaces between lines are clear, and edges are nicely rounded to give a soft-in-style icon set that is easily readable.
Phosphor’s range and flexibility mean that the icons suit almost every business. But the soft, quirky style will be more suitable if your company wants to portray a friendly, playful image.
Remix Icons
Remix Icons is a collection of over 2,200 icons designed and developed by Jimmy Cheung and Wendy Gao.
Icons are separated into handy categories such as buildings, documents, and health and medical. Each icon can be downloaded as either an SVG or PNG.
Each icon comes as an outline or a filled image, which are usually easily readable. Remix also offers a broader range of sizes than Phosphor, starting at 12px and going up to 240px.
Remix’s ultimate goal is to produce icons that are consistent, easy to understand, and have perfect pixelation. The designs are neutral yet effective. A minimalist style with thin lining and clean use of geometric shapes ensures that users will completely understand what each icon represents and can quickly take action.
The usability and simplicity of Remix’s icon set mean they are suitable if your company wants to put over a youthful and fun tone. These icons would be perfect for design, multimedia, communications, and entertainment.
Box Icons
Box Icons has a relatively smaller collection of just over 1,600 icons. However, a smaller quantity certainly does not mean a lack of quality.
In the same way as Phosphor and Remix, you can choose between a filled image and an outline. The difference is that the outlined icons are strikingly bold compared to Phosphor’s softer style and Remix’s thinner, neutral style. This difference makes the icons easily stand out to your users.
All icons at Box are available to download as either PNG or SVG and range in size from 24px to 240px. Before downloading, you are also able to rotate the icon and even add animation.
Even though there are fewer icons to choose from, there is still a wide variety. You can select from common icons for actions such as emailing and messaging, and there are also some more unusual icons to choose from, such as ghosts, cats, and bowling balls!
The beauty of Box Icons is that their bold, strong-in-style design reflects sturdiness and strength. These icons will be ideal if your company works in transportation or logistics.
Material Icons
Material Icons is a part of Google Fonts and is by far the most extensive set of icons on this list, with over 9,000 items.
This icon set also has the widest range of options, with five different styles to choose from. You can choose to download an icon as either outlined, filled, or duotone. But you can also choose between images with sharp edges and borders or rounder and softer ones.
Material Icons also has the widest range of download options. Downloading an icon for the web allows you to change the line density and the image size – ranging from 18dp to 48dp. However, you can also select icons specifically for Android and iOS. Chosen files are then downloaded in a zip folder containing all the different sizes.
Material Icons aim to create icons that are universally recognized. The designs are simple, classic, and understandable – iconic, in a word!
These icons are seen worldwide and are recognized and trusted by millions of people. These are ideal if your company wants to portray integrity and trust, such as in healthcare and financial services.
Summary
These four unique sets offer you a selection of thousands of beautifully designed, recognizable icons. Whatever your goals, needs, and design aspirations, there is an icon set that will suit.
Selecting the best icon for your app means carefully considering your brand’s personality. Your choice of icon should reflect who you are as a brand and company and how you want to be seen by your customers.
At the same time, remember to choose icons that are easily recognizable and understood by your audience. Choosing something unusual or confusing will have a negative impact on your users’ experience.
Visily has an entire, rich Icon Library with a wide variety selected from the above icon sets. With Visily, you can easily edit the icon style to suit your design, and you can switch to other icon sets using the simple Project Theme Panel.
Ready to get started?
See how you can easily create beautiful software UI athttps://www.app.visily.ai/
