Create a cohesive set of vector icons to use in your app or digital project by combining simple shapes in Adobe Illustrator.

Grumpy looking cat photo on a smartphone with “mood” appearing below.

Open our sample file for inspiration, or create your own RGB document with units set to pixels. For easy output, make your artboard the size you want your icon to be.

In the Properties panel for our sample file, we used a pixel grid to underpin our vector icons and turned on snap options for extra precision. You can turn off the settings anytime.

Icons are aligned to a grid and snap options are turned on for precision

You can create a variety of shapes by overlapping simple shapes and using Pathfinder operations to add, subtract, merge, and so on. We created a page icon by using the Minus Front Pathfinder and created a page corner by deleting a corner point on a square.

Overlapping rectangles are edited to create an icon of a page with downturned corner.

Try some other ways to combine shapes. For example, to create a heart shape, we first curved the corners of a rectangle. With the Rotate tool selected, we Alt/Option-clicked the center and rotated it. Then we rotated a copy. After selecting both shapes, we selected the Shape Builder tool and Alt/Option-clicked the extra bits at the bottom to delete them. Then we drew a line through the remaining parts to merge them into a heart shape.

A heart is created by joining rectangles, rounding the corners, and using the Shape Builder tool to remove extra parts.

To unify the appearance of the icons, first select them all. Since our icons shared the same fill and stroke color properties, we chose Select > Same > Appearance. With your icons selected, you can change the appearance of the entire set by changing the fill or stroke colors.

The page and heart icons are selected together, and fill and stroke are changed using Select > Same > Same Appearance.

To export multiple versions of each icon, choose Window > Asset Export. Select all the icons you wish to export and drag them onto the panel. Name each icon, select the formats and sizes you require, and then click Export.

All icons in the set are selected and exported to different versions such as PNG and SVG by selecting Window > Asset Export

You may need a variety of icon sizes for use in different projects. Luckily, your vector icons give you the freedom to easily change scale and other attributes to suit a variety of screens and devices.

Adobe 徽标