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.
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.
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.
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.
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.
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.
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?