in Tutorials

How to export vector icons to multiple sizes and formats in Adobe Illustrator

Making an icon set with a few hundred icons and exporting them to various sizes and formats can be a Sisyphean task. For me, it took days or even weeks with a lot of manual work: clicking, naming the files, resizing, etc. Imagine you had an icon set with 1000 icons, that needed to be exported to 5 different formats and 8 sizes.

Export for Screens

With the release of Illustrator CC 2015.3 in June 2016, Adobe made promising steps to help icon designers exporting icon sets much easier. With the new ‘Export for Screens’ feature you can export Artboards and Assets (a group of vector objects – in our case icons) to multiple sizes and formats with just a click. But there is a caveat with Artboards you probably heard about. Illustrator allows you to create only 100 artboards per single document. A limitation that still persist by the time of writing this article.

As mentioned, there are two ways to use the ‘Export for Screens’ functionality. We will cover both, so you can decide which one is more useful for you.

Mass Export Artboards

Artboards are canvases included in a single document. Each Illustrator document has at least one artboard (the main canvas), but you can add more and have them in a single document. Actually, you can add up to 100 (the maximum number of allowed artboards).

So let’s create a new Illustrator document with 20 artboards, each sized 24×24 pixels, that will be used as the base document for our icon set.

Image 1 (1)

Image: Creating a document with Artboards

Image 2

Image: New document with 20 Artboards, each 24×24 pixels

Image 3

Image: Our document filled with icons

Once you have your icons in place, you can use the ‘Export for Artboards’ feature  accessible under File > Export > Export for Screens.

Image 4

Image: Mass export Artboards

On the left side of the window select all or just few of the artboards you would like to export, and name them, as those names will be used for your output files.

On the right hand side you can define multiple formats and dimensions you would like to export to. Notice that there are predefined iOS and Android options, so you can quickly export for those mobile platforms.

You can export your assets to PNG, JPG, SVG, and/or PDF formats.

Image 5

Image: Output size and format settings

You can select exact size (defined by width and height) or percentage and multiple of the size of your assets (e.g. @0.5x, @1x, …). In our example we will export to @1x (24 px), @2x (48 px), @3x (72 px), @4x (96 px) and @5x (120 px) sizes.

If you click on the cogwheel icon, you can change the output settings for each of the formats (quality, compression, colors, aliasing, etc.).

Image 6

Image: Advanced output settings found under the cogwheel

The files will be exported to the location you choose, named by the pattern you defined in the export window. The filenames will start with the prefix (if set; optional), followed by the artboard name and scale notation (i.e. @2x; optional).

Mass Export Assets

The second export optionand an alternative to artboardsis to drag & drop your icons to the Assets Export panel, found under Window – Asset Export. It for sure takes some time to drag & drop and name each individual icon (no way to do it with one action), but it’s still worth it, because you’re not limited to only 100 objects as it is with artboards, making it a solution for large sets.

Image 7

Image: Mass export Assets (second tab!)

The export options (sizes, formats) are identical to Artboards.

Conclusion

In the Adobe Illustrator Review for Icon Design in 2016 I wrote:

“Before Adobe’s latest release (CC 2015.3) this was a big disappointment for Illustrator. Still an area of disappointment is the limitation to 100 artboards per single document. While maybe useful for most of the projects, this was extremely impractical (useless) for crafting icon sets. Most of the icon sets include a few hundred icons, if not even a few thousand. Having a large batch of icons split up in separate documents is a no-go.”

If you have an icon set that is including more than 100 icons, and don’t want to split them into multiple documents, Assets are the way to do batch exporting.

Article by Gasper Vidovic

Professional icon designer, founder of Picons.me.

Follow Picons on Iconfinder.com

Leave a Reply for Harry Prasad Cancel Reply

Write a Comment

Comment

  1. It’s a a great great article. I am not familiar with adobe Illustrator. I am very much OK with CorelDraw and Photoshop. After reading this article I found Illustrator is amazing and I must learn it. Thank you so much for your article that has inspired me and keep posting new techniques as well.

  2. Hi Gasper,
    Thanks for the amazingly crafted post. Absolutely loved every bit of it. It is really hard to export the huge amount of vector icons to multiple sizes and formats in Adobe Illustrator, but you made my work very easy.