How do I convert my AI icon to a PNG file?


Should each AI icon file be taken to Photoshop up to 100 times to convert 100 AI icons to PNG files at a size of 64×64? Or is there a shorter/faster way?

2/7/2017 9:15:00 AM

Accepted Answer

You don't need Photoshop to convert an icon from AI to PNG.

  • File > Save For Web (Ctrl+Shift+Alt+S)
  • Preset > Name > PNG-24
  • (Optional) Set desired width and height
  • Save

Saving for web with Adobe Illustrator

Saving as PNG

2/7/2017 9:59:00 AM

If you're running on Adobe CC 2015 or later, you have the option to use the Export for Screens feature (Command + Option + E or File > Export > Export for Screens... ). Just a side note, this approach assumes that the icons you want to export all live in the same Illustrator document and are all on their own Artboard:

enter image description here ^ Icon set in the Illustrator file in which the Artboards are uniform

Execute the Export for Screens command with Command + Option + E or File > Export > Export for Screens... and set the export options in the dialog box:

enter image description here

enter image description here

Setting up the document before exporting will be the critical step in using this tool. Be sure that your Artboards are the same dimensions so you can effectively resize all artboards in the same command. Conversely, if there are Artboards of variable size in the document, Export for Screens gives the option to export out 'All' or a 'Range' of Artboards from the file.