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 24x24 pixels, that will be used as the base document for our icon set.
Once you have your icons in place, you can use the ‘Export for Artboards’ feature accessible under File > Export > Export for Screens.
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.
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.).
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 option — and an alternative to artboards — is 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.
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.
