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.

With the release of Illustrator CC 2015.3 in June 2016, Adobe made promising steps to help icon designers exporting icon sets much easier. 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. So, how to export them?

Click here to read the full article I wrote for Iconfinder’s Blog.

How to use vector icons in Photoshop as vector shapes?

Have all the icons at your fingertips

For those unfamiliar with the custom shape toolbar in Adobe Photoshop, it allows you to insert a vectorized shape with just a click. And it’s not just fast, it’s also a convenient way to have an overview of your icons.

All our Picons.me iconsets already come with the necessary Custom Shape files (.csh). Personally, I couldn’t live without them.

How to import the Picons into Photoshop’s toolbar?

It’s super easy.

  • In Adobe Photoshop open “Edit” > “Presets” > “Preset Manager…” from the top menu
Photoshop preset manager
  • When the Preset manager pops up, choose “Custom Shapes” from the dropdown on the top
  • Click on “Load” and browse for the .CSH file, which came with your Picons.me iconset, select it and then click “OK”.
  • You can import multiple CSH files. We suggest you import all your Picons.me iconsets.

That’s it.

Now, to insert an icon, use the “Custom Shape tool” (see screenshot).

custom_shape_tool

Choose your desired icon (dropdown at the top bar) and draw it as an ordinary shape.

Toolbar

You can color it, resize, transform, apply a stroke, … whatever you like. The icon will be a vector shape object, so you won’t see any quality loss when resizing.

Have a productive time!