50 States Icon Pack

This is image placeholder, edit your page to replace it.
Above are a few examples of state icons that I’ve created as part of a free 50 state icon pack that you can download here. I am also providing the Photoshop .psd file that I used to create these icons, so that anyone can generate their own state icons in any color or style that they want using Photoshop layer effects. Yesterday I found myself searching the internet for an icon pack containing shapes of all 50 American states. There weren’t many available options, so I decided to craft my own based on free vector maps provided by digital-vector-maps.com. I combined all of their available United States vector images into a single Photoshop .psd file, giving each state its own layer. Those layers are stored within a group so that you can apply layer effects to every state from one area. For my project’s purposes, I wanted all flat gray icons at a resolution of 128px by 128px, so this is what the file will look like when you first open it up in Photoshop… states-psd If you want a different color, just change the color overlay setting. Similarly, you can apply other layer effects like gradients, shadows, bevel, and glow effects. When you are ready to export your icons as transparent .png image files, select “File > Scripts > Export Layers to Files…“. This will bring up a window where you can configure the destination of the output icons, the file format, and a prefix for the file names. When you begin running the batch export, it will take a few minutes to process the task. During this time you will see your Photoshop layers panel going crazy as it exports each state to its own file. states-batch-exportIf I set the prefix as “state-” in the export dialog, the resulting file name for Alabama ends up being “state-_0000s_0000_alabama.png”. To address this issue, I recommend following these steps to improve the layer export script’s naming conventions. If you have permission issues saving the “Export Layers To Files.jsx” file in Windows, make sure that you open up a text editor program using the “Run as Administrator” command. After making those changes and re-launching Photoshop, you should be able to run the export script and see more sensibly named files like “state-alabama.png”.


Download the 50 state icon pack and PSD file using the buttons to the right.

Related Posts

5 Comments. Leave new

These are awesome! Thanks for sharing!

These are awesome. Where did you happen to get the outline for the state, I’d like to try and make DC.

Eric Heikkinen
April 10, 2014 1:39 pm

@Arun As I mentioned somewhere in the article, digital-vector-maps.com was my source for the state graphics that my work was based on. They don’t seem to have a DC metro area map available in the same format on their website, but you may be able to find one elsewhere and apply the same technique.

Many thanks, exactly what I was looking for and it was perfectly structured in the PSD file.

Thank you for this and for mentioning the source, too. So very helpful!

You must be logged in to post a comment.