In a lot of projects we are asked to produce different color versions of the same icon, sometimes this is to represent a different icon state or to provide the end user with interface skinning options.

By creating Icon sets you can make working with color easier, faster and prepare your Illustrator document for simpler editing. Global colors and Color group in Swatches panel can help you with this. I believe this is a rather powerful feature that might be a bit daunting at first sight. It definitely needs some getting used to before you actually see or understands its power. Use the Swatches panel (Window > Swatches) to control all document colors.

The first thing I usually do is group my color swatches in a Color Group and duplicate my artwork or save another version if the artwork is too heavy/large to work in the same document. Select the color swatches and click the New Color Group icon in the Swatches palette to create a Color Group. Give it a name and click OK.

How to Recolor Icons in Illustrator

You can automatically add all the colors from your selected artwork or all the colors in your document to the Swatches panel. Illustrator finds the colors that are not already in the Swatches panel, converts any process colors to global colors, and adds them to the panel as new swatches.

To add all document colors make sure that nothing is selected, and choose Add Used Colors from the Swatches panel menu. To add colors from selected artwork choose the objects containing the colors you want to add to the Swatches panel, and do one of the following:

  • Choose Add Selected Colors from the Swatches panel menu.
  • Click the New Color Group button  in the Swatches panel. Specify options in the dialog box that appears.
  • Colors are arranged and saved using the Hue Forward rule.

Global process colors in Adobe Illustrator are very useful if you’re doing a set of Icons that uses a lot of the same color or tints of the same color. A global color is automatically updated throughout your artwork when you edit it. You can identify global color swatches by the global color icon (when the panel is in list view) or a empty white triangle in the lower right corner (when the panel is in thumbnail view).

Global process colors allow you to create a single color swatch that you can update and have it apply, of course, globally. For instance, if you apply the same global color to many objects in your Illustrator document and then you decide you want to change the color, it only takes a click or two to update all the objects. You simply alter the global color to your liking, and everything on the page updates. And you don’t need select object contains this color.

Tips on Coloring Icons

Quickly changing Icon Color in Illustrator

You can also create tints in the Swatches panel. A tint is a global process color or spot color with a modified intensity. Tints of the same color are linked together, so that if you edit the color of a tint swatch, all associated tint swatches (and the objects painted with those swatches) change color, though the tint values remain unchanged. Tints are identified by a percentage (when the Swatches panel is in list view).

You can create a Global process color by clicking the Global check box in the New Swatch dialog or the Swatch Options dialog box. Global colors are disabled by default.

Another way to recolor your Icons is using Color group. A Color group is an organization tool that lets you group together related color swatches in the Swatches panel. You can identify a color group by the folder icon.

Select objects that you want recolor. Click the Edit or Apply Colors wheel icon in the Color Guide palette.

How to change Icon Colors easily

Start dragging the color handles in the color wheel. By default the harmony colors are linked. I usually try out things first with this option as set to linked, but if your result is not exactly what you’re looking for, you could try things out in the unlinked state by clicking the icon so it becomes a broken chain icon.

Recolor Icons

Instead of editing colors, you can also assign colors. Click the Assign option button to go to this feature. Here you’ll see the swatches of your artwork that are currently in use followed by an arrow and the new swatches to the right. You can assign a new swatch to each color. You can also change the order of the new swatches by dragging them to another place in the column of new swatches. So instead of experimenting via the color wheel, you can also use this method. I find this feature handy if I have already colors in mind and I want to adjust the colors in a rather complex artwork in a fast way.

Icon Colour

Also you can share the solid swatches you create in Photoshop, Illustrator, and InDesign by saving a swatch library for exchange. The colors appear the same across applications as long as your color settings are synchronized.

  1. In the Swatches panel, create the process and spot-color swatches you want to share, and remove any swatches you don’t want to share.
  2. Select Save Swatches For Exchange from the Swatches panel menu, and save the swatch libraries in an easily accessible location.
  3. Load the swatch library into the Swatches panel for Photoshop, Illustrator, or InDesign.

I hope this helps anyone using Illustrator to create multiple color versions of the same icons!

Custom Icon Design

2 thoughts on “Recoloring Flat Icons in Adobe Illustrator”

  1. Hi,
    I totally love yopur blog. Well laid out and really good to read.
    I am new to the world of blogging, but really enjoyed this.

    I run a London comedy club and would love to link to this at www.
    piccadillycomedy.co.uk and would love it if you took a peek at my blog there.
    If you find it half as good as I did your I would be really pleased.

  2. ora exacta says:

    Am aflat aceasta pagina, dupa ce am cautat despre Icon Design Tutorial:
    Recoloring Vector Icons in Illustrator pe Google. Se pare ca informatia dvs e foarte valoroasa, mai ales ca
    am mai gasit aici si despre ora, ora exacta, lucruri interesante si folositoare.
    Mult succes in continuare!

Leave a Reply

Your email address will not be published. Required fields are marked *