.svg){kind=logo}
This article is about system icons, otherwise known as product icons, which users need to interact with a product or online experience. Marketing icon (also called unique) are often more complex and used to communicate branding and messaging.
What is iconography?
Icons are the illustrations that help us to navigate throughout the various digital products in our lives. These tiny symbols are crucial to product design, not only because they save space, but because they are instantly recognizable and will help users establish visual muscle memory.
There are a million ways to draw love. It’s up to you to find the best one for this project.
The basics of an icon system
When you’re ready to start building your first icon, you’ll want to create a system of many icons. Because these icons need to live in harmony, you’ll want to establish some guidelines for yourself upfront that will determine specific characteristics of your icon set.
Understanding the types of icons (filled icons, outline icons, universal icons, conflicting icons, and other types), how they’re best used, and what makes a “good” icon will help you implement them effectively in your UX designs. Learn more in the Icon Terminology lesson.
Size
The first element to consider is size. While icons are designed to be scalable, you will want to build everything at one size to maintain consistency. This will help your engineering team out when implementing these icons. I typically recommend you build your set of icons at 24x24px or 32x32px. Because your engineers are likely using the 8 point grid, you need a size that is divisible by 8. Check with your engineers that this is indeed the grid system they are using before you start drawing anything.
Strokes and fills
Next you need to consider if you want an icon set that uses stroked icons or filled icons. A stroked icon is one where everything is outlined with a stroke. Your strokes should all be the same size. I recommend 2 pixel strokes. Filled icons are made of solid shapes with negative space building out more complex parts of the icon. Typically filled icons are easier for people to scan, which makes them ideal for products. Sometimes you will need both stroked and filled icons. If so, you want to make sure they are cohesive and use the same basic shapes.
Color
Even though your icons might be used in different colors within the product, you’ll want to build everything in one color. I recommend our good friend #000000 – black. This way, when your icons are used in designs, you and other designers will be able to adjust the color to suit the design, rather than having to fit to the colors the icon designer chose.
Starting to design
You have your size, your style, and your color ready. Let’s start designing icons. It can be tempting to just dive in and start drawing. I recommend before this step that, if you haven’t already, you come up with a list of all the icons you’re going to build. This will allow you to begin with the simpler icons which will drive your style choices, and help you make choices later down the road.
Which tool should I use?
There are many great design tools out there. Traditionally, icons have been made in Illustrator and, before that, Photoshop. A lot of designers have started using Sketch. I personally use Figma. This tool is precise, fast, and will create the cleanest SVG exports. For the purpose of this article, I will be using the terminology used for creating icons in Figma.
The first steps
You’re going to create a frame at the size you decided earlier. You’ll want to add a grid to your frame if you haven’t made icons before. It will help you keep things straight and you’ll be able to more easily see when shapes aren’t centered. I recommend a 2px grid on top of the 1px grid built into Figma upon zooming in.
Geometric shapes
The rectangle and ellipse tools are your best friends. Start with those when you’re designing anything geometric. The rectangle tool will allow you to adjust things like corner radius more easily. The ellipse can easily bisect circles and will create perfect curves. You can use boolean operations (similar to the pathfinder in Illustrator) to create combinations of shapes. Starting with geometric forms will give your icons an extra polish. Of course, not all icons can be made from geometry, and being made from geometry doesn’t automatically make them perfect. Use your best judgement.
Bezier curves
When you aren’t using straight lines and geometric shapes, you’re going to need bézier curves. A bézier curve is a parametric curve used in computer graphics and related fields. The curve is named after Pierre Bézier, who used it in the 1960s for designing curves for the bodywork of Renault cars. That’s pretty wordy. For our purposes, bézier curves are created by handles that extend from any vector point, or anchor. At the end of each handle is the handle control point. These handles seem to magnetically pull the shape toward them. To learn more about them, I recommend this article by Peter Nowell. Even though he is using Sketch, the same principles apply regardless of program.
Design principles of iconography
There is obviously more to drawing than learning about shapes and curves. Creating an icon is also about composition, balance, and unity between the icons. When I am designing icons, here are some of the questions I ask myself, and if I can say ‘yes’, I’m usually on the right path.
- Is the icon centered in the frame?
- Does this icon feel like it goes with the others I have already created?
- Have I simplified this icon as much as I can?
- Have I cleaned up this icon and removed hidden layers?
What makes an icon good?
Beyond making balanced, beautiful icons, what matters most is that the icon is communicating its meaning clearly. I believe icons should demonstrate one core concept – once you start combining a bunch of different elements together, your icon will become confusing and messy. Icons should be, at their core, simple. If there is too much detail, it can be harder to scan, and your user’s experience will suffer.
Your icon should reflect your brand when possible. For instance, if you can use clever metaphors, your icons will stand out. My favorite example of this is the Twitter home icon which is a birdhouse. Clever, yet beautifully subtle, for a company whose logo is a bird.
Getting good at the metaphor
Drawing great icons relies on crafting great metaphors. We all see a floppy disk and understand it means ‘save’ or that a pencil means ‘edit’. These concepts have stood the test of time. The best example of this, I find to be the phone icon, which on most devices is a landline handset. Most people don’t own landlines anymore, but the image is so iconic now, that even people who haven’t ever seen one know what it means. As more of our world lives in tiny rectangles, or are rectangles themselves, it will be harder for us to create easily differentiated imagery. That’s why we need to get really good at metaphors.
One way to learn how to do this is to observe the work of others. When I’m starting to draw a new icon, I will start by going to The Noun Project and searching for the icon’s meaning. I like to see what others have done. There is always space to learn from others. Sometimes, when I have an icon that is really stumping me, where the concept doesn’t already have imagery associated with it, I will search for similar terms. For instance, if ‘VIP’ isn’t getting me the results I want, I’ll try ‘king’, ‘luxe’, or ‘exclusive’. Being able to find core meanings in what you are looking for is a skill that is very important in an icon designer.
As my late mentor, Paul Bowman, told me “There are a million ways to draw ‘love’. It’s up to you to find the best one for this project.” There’s often no right answer. You’ll have to try a lot of things once you start building icons, making sure your metaphors are clear and helpful.
Organization
You’ve created your icon set. It’s elegant, cohesive, clear, and your file is beautifully clean. But how might you organize and name all these icons? Drawing isn’t the end of the process.
Once you're done with your icons, you want them to be as clean as possible for the best possible export. First, turn all your icons into components. Keep naming simple. For instance, an icon of a lightbulb will be named ‘lightbulb’, not ‘idea-lightbulb-light’. Give your icons the simplest, clearest names possible. You can use the component description box to add tags and keywords. Components are searchable in your design system, which means you can add extra search terms.
To best organize your components, you can put all your individual frames into larger frames that organize them by category.
Conclusion
Your icons are a representation of your product and your brand. They are the tiny, unsung heroes of any product. They often don’t get the love they need. But you now have the tools to start learning how to make great icons.
Uxcel offers great tools for learning about icon best practices, as well as online courses on UX and UI.
