Table Of Content

Instead, if your task is to convey “search”, think through designing a magnifying glass in a way that ties into the project at-large. Does the brand have signature colors, use a specific line weight, or have an exact angle in its logo? No matter what website or app you’re building, icons will probably make up much of your interface, so it’s important to understand what makes the best icons successful.
Find the right metaphor: Learned meaning and understanding
How Royal Caribbean designed Icon of the Seas, the world's largest cruise ship - Fast Company
How Royal Caribbean designed Icon of the Seas, the world's largest cruise ship.
Posted: Fri, 26 Jan 2024 08:00:00 GMT [source]
This free tool is a great resource for those who need to create website favicons and app icons, though it’s less useful for graphic designers and marketers. While not every icon should look exactly identical, having consistent properties throughout brings icon sets together. No matter what visual element you draw from, establishing guidelines for your icon library ensures consistency and quality.
How to design effective icons, Part 1
Content and microcopy appear all over design system components. This guide will walk you through how to get started with content strategy in your design system. When drawing geometric forms, if you need to make complex polygons, you can either start from a square or rectangle, or you can use the pen tool to go from point to on pixel.
Simplified Icons
Metaphors are important in icons - we use them all the time without even thinking. When scaling icons to create smaller versions, I like to keep the metaphor I'm using in mind to communicate the icon's message. Samuel Lee Miller is the founder of Iconaday, a community that celebrates icons as the short stories of visual design. Product Designer by day and playlist curator whenever possible, he’s passionate about using design to solve problems and help others. Icons are known for simplicity and the ability to communicate concepts quickly.

You might have your base product icon at 24px, but marketing icons at 80px because of the vast difference in use. Choose a common size to build all your icons to, and then allow your engineers to scale to other sizes that might be needed by other designers. You don't want to build the same icon over and over at a multitude of sizes. Build your icon set as you create infographics and presentations with Venngage’s Icon Maker. Choose from and customize our 40,000+ icons and illustrations that can help visualize any of your communication ideas.
Get the Iconography Starter Template

There’s more to designing a great icon than just a quick visual element. You have to think about shape, color, usage, and even what device or operating system it might appear on. Some icons seem like no-brainers (an X, a hamburger menu, a chevron), but these icons require you to have already figured out the basic tenets of your icon system.
Sticking to the grid also prevents blurriness when rendering the icons, since line widths will always be whole numbers. CareerFoundry is an online school for people looking to switch to a rewarding career in tech. Select a program, get paired with an expert mentor and tutor, and become a job-ready designer, developer, or analyst from scratch, or your money back. Below, I drew a simple house icon and left the pixel grid turned on. On the left, you’ll see an icon made up of strokes that fit perfectly into the pixel grid.
UX Prototyping: Your Complete Guide
For example, if you’re designing a doughnut, it needs to look like a doughnut and be recognized as a doughnut. The icon shouldn’t just be a circle with another circle inside of it. Instead, consider adding sprinkles — a standard identifying marker for a doughnut. Maybe you have an icon set that fulfills one style, but not the other.
This article aims to inspire you with 21 carefully hand-picked UX case study examples, each offering valuable lessons. You’ll need to consider several aspects of communication to get your point across effectively. Learn the full UX process, from research to design to prototyping. Get the best UX insights and career advice direct to your inbox each month.
Bright color choices have been a big deal in all aspects of design. A bright color is an enticing way to draw the eye to the icon. For more elaborate uses of icons – we’re not taking tiny favicons here – icons can be stacked and layered to create more of an art element. The other trick to using this style of icon is to consider oversized usage with plenty of space around them.
And when it comes to icon design, they are rather popular. From icons that are contained inside a sphere to circles within objects, creating a design mark using circles can establish just the right feel for users. Two-color icons can build on your existing color palette or brand colors or combine almost any other color pair. When designing using the icon trend, look for color pairs that will stand out from the background on which you plan to use them. The key to working with abstract shapes is to make sure you aren’t replicating something by mistake and that icons truly are abstract.