How to design effective icons, Part 2

Refine your work and style, and stay (really) organized

A digital illustration of six bell app icons placed diagonally on a diagonally-split half-black-half-white background with teal lines. The icons are a mix of white lines on black backgrounds, black lines on white backgrounds, and purple lines on white backgrounds.

Icons are dynamic elements that adapt to user needs, aid storytelling in tooltips and tutorials, and scale to become part of a brand’s voice. As designers, we know that when icons are clearly designed with understandable symbols (and coupled with a supportive UI) It can mean the difference between a product being usable or inscrutable.

Over the years I’ve designed thousands of icons that have guided millions of people through interfaces; during that time, I’ve followed a consistent set of guidelines and practices that have been helpful in my work. In Part 1, I focused on the prep work—from posture and software to form, beauty, and supplemental meaning—necessary to create the foundation for icon design work to begin. Here, in Part 2, I’ll discuss where to focus your attention as that design process begins.

Design considerations

Before starting any vector work consider icon size, alignment, and style. If you don’t manage these details first, it will be difficult to create balanced icon sets.

Size. Standard icon sizes for dense layouts are 16 x 16px, 18 x 18px, 20 x 20px, or 24 x 24px. So, icons are easier to align horizontally and vertically think about them in sizes that can be divided by four and centered on a rectangular canvas.

When choosing a size, start with a square and view it at 100% to get an accurate picture of how reduced your artwork will need to be to fit inside it. Remember that the smaller the icon the harder it will be to add badges or convey complex meaning.

A three row five column chart. The top row has five purple circles that read from left to right: XS, S, M, L, XL. Underneath those headings in the middle row are five squares (depicting icon.sizes) that get larger from left to right and underneath them the bottom row reads from left to right: 14, 16, 18, 20, 24 pixels.

Common icon sizes in pixel and size designations.

Alignment. Symmetry and balance will make your icons cleaner, clearer, and more consistent, and the result will be icon shapes that can be reused when adding to your set. When complete, icon forms should be aligned inside a pixel grid and not overlap the boundaries of the artboard. Pushing the points of a vector shape for perfect alignment takes some patience but putting time into these details at an early stage will benefit your design in the long run.

A transparent purple square (inside of which is a thin opaque black horizontal line with two heavy opaque black vertical lines perpendicular to each other underneath it) is next to the words Align Top on a purple-lined white background. The horizontal line in the purple square is aligned to the top of the A and the T.

Seven white squares outlined in purple each with different lines and line weights inside form a right angle consisting of a row four across (aligned top and bottom) and a column four down (aligned side to side).

Icon and font alignment (top) and horizontal and vertical alignment of an icon set.

Style. Most icons are outlined or filled. Outline styles work well in interfaces that are lightweight, minimalistic, and modern. Filled, or duotone, icons are used most often in complex icon sets that require refined differentiation between icons. They can add depth, weight, focus, and contrast, so they can be especially beneficial on dark backgrounds.

When using filled icons, experiment using a transparency of the main color or an extra tone that matches the transparent shade; I’ll often place icons in a row with different transparency percentages to evaluate which value fits best). Finally, a mix of outline and filled styles can convey an action, using the outline style as default state and filled as the selected state.

Three circles divided in half horizontally and in thirds vertically on a white backgound. Left to right: black outlines only, middle white outline with opaque black fill, black outline with transparent gray fill.

From left, outline, filled, and duotone icon styles.

Each style direction has its pros and cons so it's best to test them by putting them into a UI to see which best suits the color theme, type choices, and contrast. Not all icons work well filled and outlined icons might look “frail,” so experiment by applying different styles to your icons and viewing them within the context of the theme of the interface to help find the best option.

Keyshapes

Just as the letters a, e, g, n, and o can define the personality of a typeface before working on the rest of the font family, there are certain shapes that define the proportions of icon styles. Circles, rectangles, squares, and triangles are the core shapes that define an icon's size and vertical, horizontal, and diagonal lines. Since they define the baselines fundamental to icon sets, determining the relationships between them, and your typeface, is a crucial step before designing any other shapes.

On the left is a large white square, outlined in purple, with a grid background, and thin black lines creating two concentric circles and dividing it in half horizontally, vertically, and diagonally. On the right are four smaller white squares (two across and two high) with grid backrounds each with a shape inside (clockwise from top left circle, square, rectangle, triangle). Between the large square and the four smaller ones is a plus sign.

How keyshapes (circle, square, triangle, rectangle) work in combination to form basic proportions on a grid.

Due to visual rather than numerical balance, circles will always appear more prominent in dimension than rectangles. Visual balance is as important as numerical precision when creating icon shapes; resize circles so the proportions appear correct when placed next to or below rectangles.

A quick reminder about shapes: Aim for shapes that can be recognized in seconds at a small size. This means choosing shapes that are simple and familiar; shapes that are complex will be difficult to scan and understand. You can test how a shape translates by scaling it down and quickly looking away and back again. If you find yourself staring at it for too long, it's a sign that others could have difficulty deciphering its meaning. Always remember that searching for the correct icon in a UI can lead to frustration. Push for clarity and use metaphors that are easy to recognize.

Anchor points

Anchor points are the connectors of a vector shape, and the goal is to have as few as possible. Vector shapes can become cluttered with unnecessary points that make scaling and cutouts through pathfinder operations a pain.

Clean forms are what you want: They scale well, have fewer rounding errors after export (too many anchor points can interfere with decimal precision), and look more professional when handing them off to another designer. Reduce and remove unused and redundant vector points wherever possible while preserving the original shape. Editing anchor points takes practice. The good news is that there are plenty of vector exercises on the web to practice creating perfect curves with as few anchor points as possible.

On the left a white capital letter A with a thin black outline and six purple arrows pointing to extra pivot points. On the right, is the same letter A with the thin black outline but without the purple arrows and extra pivot points.

On the left, a vector shape with an unnecessary number of anchor points and on the right, the same shape without them.

Corner radius

The rounder the corner, the “friendlier” the icon. Corner rounding can range from 0px–4px for regular workflow icons. Experiment with different icon shapes and different degrees of roundness to see which best fits your style. Exercise caution: Radius not only affects overall look and feel but readability.

A range of corner radiuses and how they affect an icon’s appearance.

Stroke weights, borders, and caps

There are simple and subtle ways to influence the appearance, aesthetic, and character of an icon. The appearance of a vector stroke is reliant on the shape’s visible outline, which can be altered by weight (the thickness of the line), by setting the border stroke to centered, inside, or outside the path (to experiment with the optical size), or by defining how a stroke will look when it ends (cap options).

Stroke weight. Icon size usually informs stroke weight but there is some flexibility based on the look of the icon: A heavier and bolder icon style will usually require a 2px stroke weight; in contrast, a minimalistic and reduced icon will benefit from a thinner stroke weight of 1px or 1.5px. However, since the UI, icons, and fonts should form an aesthetically pleasing unit, and support focus on the content, the best thing to do is place them in the UI and experiment. Looking at the icons in conjunction with fonts and buttons will tell you whether they’re balanced.

Three white squares each outlined in black. The first (from left) has a thin outline, the second a medium weight outline, and the third a heavy outline.

Stroke weight not only affects the appearance of icons but also their readability.

Stroke border. The stroke border functions as a sort of wire around which the "insulation" of the stroke is aligned, and it can subtly alter an icon's appearance. Once vector strokes are drawn on your grid, use Illustrator's Stroke options (Window > Stroke) to modify their alignment (inside, outside, or centered). Your icon should appear more or less crisp depending on your choice: Round and natural shapes are easier to draw using a centered stroke and squares and rectangles benefit from inside or outside alignment.

Three equally sized white circles with a blue outline. The first (from left has a light gray stroke on the inside of the blue line, the second a light gray stroke on the outside of the blue line, and in the third, the blue line is encased in the light gray stroke. Above each is a section of a right angle of light gray stroke with (from left) a black line on the outside, on the inside of the light gray stroke, and in the middle of the light gray stroke.

Stroke border—aligned inside, centered, or outside a path—can visibly alter an icon’s size.

Stroke cap. Defining the appearance of the ends of a vector path is another way to change an icon's aesthetic: Use a round cap to create a friendly look and feel; a butt cap cuts the stroke off at a right angle, which can make icons look more precise and formal; and a projecting cap extends the end of the stroke by half of the stroke weight, which can smooth the formality of a butt cap.

Three equally sized paperclip symbols in thick light gray stroke. Above each is an expanded version of the end of the stroke outlined in black. The first (left) shows a cap that ends with the stroke creating an end stroke at a right angle; the second shows a stroke cap that rounds off after the stroke ends; and the third shows a stroke that caps just after the end of the stroke.

The effect of different stroke end caps.

Illustrator’s Pathfinder tool

Once you're happy with the vector stroke version of your icon, make a copy of it and turn that copied version into an expanded shape or outline stroke (the term will vary depending on software). Strokes that are not turned into expanded shapes can cause rendering issues, in browsers and render engines, that will change the visual appearance of an icon.

Essential for finalizing icon shapes before starting the export process, the Pathfinder tool merges all the parts used to construct the icon, subtracts the necessary cutouts, and leaves one intact shape with a single or compound path. This will be the version of your icon that's exported for implementation. Since the Pathfinder tool is a shortcut to a complex editing process the best way to understand what happens when it’s used is to apply it to simple icon shapes.

Two rows of shapes. The top row is four different variations of one square overlapping another: First, (from left) is the two squares creating a single shape outlined in black and filled with gray; second is a gray square outlined in black with a white square outlined in black covering its lower right corner; third is two overlapping white squares each outlined in black with a gray square in the center; and fourth is the two squares outlined in black and filled with gray, except where they overlap, which is white. The bottom row (from left) is the two squares creating a single shape outlined in black and filled with gray; second is a shape, outlined in black and filled with gray, created from the part showing from the gray background square; third is the shape created from the part where the two squares intersect outlined in black and filled with gray; fourth is the two squares outlined in black and filled with gray, except where they overlap, which is white.

Pathfinder operations for combining, subtracting, intersecting, and excluding overlapping shapes.

Important: Keep a version of each icon with its vector stroke intact. It will allow you to more easily scale the size, adjust the stroke weight, or make any other modifications when reusing shapes. Take my word, it is a pain to do it after you’ve expanded your strokes.

Contrast and accessibility

There is so much to say about accessibility in software, but of primary concern in icon design is color contrast. Matt May, principal designer on Adobe’s Product Equity team, recommends using Adobe Color's Contrast Checker to help identify accessibility and contrast issues early on and create a full set of colors that don't collide—not only for icons but also for text. Do not rely on your perception; many people have mild vision impairments beyond low vision and color blindness.

Three rows (each three high) of the same document icon, with an x in the lower right corner, in different colors on a background, divided vertically into two-thirds white and one-third black. Top row (left to right): blue, navy, teal (on black); middle row (left to right) red, brown, red (on black); bottom row (left to right) yellow, orange, yellow (on black) .

An icon set adjusted for high contrast on the Windows OS.

One last comment about icon accessibility: Naming your icons and supplementing them with screen reader-only content can make an enormous difference to people navigating your app or website using screen readers.

Establishing a sustainable design system for saving, updating, and sharing icons, for yourself and your team, can not only bring you peace of mind, it can also save hours of work. That process will vary from team to team but there are a few things to keep in mind when you first start the process.

Export options: SVG, PDF, PNG. After you’ve finalized your icon(s), the next step is to export it into the production process. The best rule to follow when exporting is to check which format is needed with the person implementing the icons so you can deliver the asset type that will guarantee the best performance. SVG and PDF are scalable vector formats used often for web and mobile applications. PNGs are flat bitmaps that support transparency but must be exported at sizes scaled specifically to a screen’s density (older frameworks tend to use PNGs but they are also fallbacks if a browser cannot render the SVG).

Naming files. Some icon sets I work on contain more than 1,000 icons. There are some specific challenges for documentation and maintenance of large icon sets but of primary importance is creating a file-naming structure that supports search and share.

I rely on a joint image and text search but I still name my files as precisely as possible (with icon function, size, and state) so I can search with specific terms. As an example, instead of using the title “save," use “save_file_to_cloud” so you can search using save, cloud, or file. Meaningful icon naming can also improve screen reader outcomes. As an example, Apple’s VoiceOver would read the above file name as “save underscore file underscore to underscore cloud” so someone using a screen reader would know how to type the file name.

Know where files are stored. It’s essential to know the location of the icon repository, and who has access to it. And, since sharing and updating larger icon sets on teams can get tricky, make sure to create design guidelines for how to consistently modify or add to icon sets. And consider using solutions like Creative Cloud Libraries to make your icons more sharable, to automatically sync them every time icons are added, and to make copies accessible to selected team members. When teams are iterating quickly, this way of sharing can help save a lot of time because vector shapes and other graphic elements automatically update whenever libraries are refreshed.

Production icons. Double check the icon implementation with the developer to make sure the appearance is not scaled or altered and has the right color and behavior on default, hover, and selected states. Then create specs and documentation for how the icon should look when implemented with the UI.

Icon design is more relevant than ever

Because images are perceived and understood faster than words, apps and websites that successfully couple text and iconography to explain why something matters, will improve their connection with their audiences. Their experiences will also be delightful, streamlined, and coherent.

Until you discover a design method that works for you most of the time, be patient, continue creating and iterating, and remember:

The simplest shapes are often the most difficult.
Establish key metaphors early on to create consistency.
Reuse shapes as often as possible to save time and achieve a coherent look and feel.
There is unspoken beauty in the perfection of a Bezier curve.
While designing a basic icon set, remember that icons tend to get more complex as projects expand, so plan space for badges so your set will be balanced down the road.
Don't give up and enjoy yourself, and the satisfaction that comes from designing beautiful icons!

Header copy

Design your career at Adobe.

Button copy

View all jobs

Button link

/jobs