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

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.

create-set-icons_step1

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.

create-set-icons_step2

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.

create-set-icons_step3

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.

create-set-icons_step4

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.

create-set-icons_step5

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.

01/21/2019
Was this page helpful?