Icons are used to add form and function to user interface (UI) designs by simplifying and speeding up user interactions. They can also add style and visual interest to UI designs and support and strengthen your brand identity.
Designing iconography might seem intimidating - but it really isn't. Even just a few well-placed icons can improve user experience greatly when done correctly.
Here are 10 of my top iconography to help you step up your next UI design project!
1. Icons should be simple
Don't let your icon designs get complicated. Keep them as simple as possible, especially at smaller sizes. You want your icons to be easily and instantly identifiable, so they should stay simple shapes or pictures.
2. Icons need to be instantly recognizable
Icons should be immediately recognizable to your users. If users are left wondering what an icon means, it defeats their purpose and harms their ability to use your website or digital product. This might mean losing business because users couldn't find what they were looking for or got confused and left. Don’t leave users wondering what an icon is supposed to be as it only harms the overall user experience.
3. Meaning is created with icons
Icon images need to be easily understood. The meaning should be directly tied to the function of the icon, such as a house icon for the home page. While metaphors are sometimes easily understood by users, more literal icons are generally easier to recognize.
4. Icons should be scalable
Icons are mostly used at small sizes, but sometimes you might need to use a larger version (or smaller) for a project. So check out how your icons look good regardless of the size they’re displayed at and modify as needed.
5. Icons should be accessible
Proper alt tags for icons are an often overlooked, but important feature. Unless you're using text labels to accompany your icons, make sure to use alt tags so that icon functionality is accessible to people using screen readers.
Icons should also have enough contrast and be sufficiently sized to be accessible to a wide variety of users and their viewing ability.
6. Be mindful of icon color
As a general rule of thumb, icons should be a single color to keep a design cohesive. Usually, that's your accent color, and it'll be used to signal actionable functionality to your user. You may want to consider using different colors or shade of your accent color to indicate an active icon, to distinguish it from inactive ones.
7. Use vectors
When making custom icons, you should always create them as vector images using a program like Adobe Illustrator. This way, they can be scaled easily and without losing clarity. Use the SVG file type when saving icons for use in digital products as it preserves scalability as well as transparency.
The next best alternative to SVG is to save them as lossless PNG files, as they’ll retain transparency and the quality won’t deteriorate.
8. Icons should be uniform
Your icons should stay uniform in style and size. Using icons that don’t have a consistent style or that aren't the same size will confuse users and make your interface look messy.
When it comes to size, though, visual weight is more important than exact pixel dimensions. This means that sometime you'll need to make some icons slightly bigger if they have a low visual weight. You can also put your icons in containers to help keep them more consistent in appearance.
9. Icons should be clear
Users shouldn’t be left wondering what an icon is or what it's use is. This is why it's important to use imagery that is immediately discernable to users, and distinguishable from other icons in a set.
10. Utilize universal icons
For those of us more design-oriented, it can be tough sometimes to keep from reinventing the wheel - but using what is tried, tested, and true is more important in iconography. While unique, creative icons can add visual interest, they may also be harder to decipher, which harms the overall user experience. The primary goal of your icon design should be ease of use.
For common functions, stick to icons people recognize. Here are a few examples of universally recognized icons:
House icon for the home page
Three horizontal lines for a hamburger menu
Magnifying glass for search
Pencil for editing functions
Thumbs up / heart for like function and likes counters
Bookmark for saving functionality
Gear or cog for settings
There are many others though as well. If you deviate from a universal icon, be sure to add a text label to assist users.
These are some basics for iconography use in UI design, which when used properly, can improve user experience and add aesthetic appeal to your web, app, or other digital products.
Are you still struggling with Iconography, or User Interface design in general? Book a free 30 minute, no-commitment consultation to find out how our creative services can help your business grow.
