I’ve been working on a mobile app project in which one portion of the app is designed to plot company locations in each U.S. state. The original idea was to use just the two-letter U.S. Postal abbreviation in lieu of an icon. However, the way the app development engine is designed, it scrubs a particular column of the Excel spreadsheet that contains the company locations and uses the state name as the category name in the app scroll bar. So it seemed a bit redundant to use CO as the app icon and Colorado as the category name beneath it, for instance.
The solution? Use vector state outlines to create 50 state icons to represent each category, with the state name showing up below the icon.
I’ve created a single vector file with 50 layers representing each state. The downloads below are saved in CS4, CS3, CS2, and CS formats. These files are free for you to use and modify as needed. Because I work on PC, I don’t have a Mac version available, but my understanding is that Adobe files can be opened cross platform. I’ve also attached individual PNG files for each state–if you don’t mind using red icons.
But what if you don’t want your state icons in red? What if you want them in blue? Well, obviously, you’ll need to alter the vector files, but then you run into the same quandary I did: Each layer has to be saved into its own PNG file if you want to upload the icons to a mobile app, for instance. While this process isn’t difficult, it can be tedious.
There is good news–news that will save you a bundle of time.
I came across an Illustrator script that not only exports each layer into its own, individual PNG file, but it also uses your layer name as the file name. This handy script allowed me to create 50 separate PNG files in about 3 seconds. Here’s the URL: http://www.metaphorical.net/note/on/layer_export
Enjoy the files, and if you use them, take a minute to leave a comment with a link showing how you used them. I’d love to see your work!
DOWNLOAD ZIP FILES HERE (each vector file is roughly 4.5MB)
Heya Josh! I downloaded the CS3 version and opened it with the CS3 version of Illustrator on my Mac. Seems to work just fine. Thanks! 🙂
[…] also created icons for each state to be used in our U.S. distributor locater screen. For the international distributors, I created […]
these should work just great Josh I’m so glad I came across your stuff. not up yet but will be soon come check it out. Im new to all of this and decided hey lets grab the bull by the horns and do something for myself.
?Is there anyway I can donate for this. Also can you do one for DC?
Hi Kenny. Thanks for stopping by and taking time to comment. I hope you find the vector icons useful.
Unless you feel absolutely compelled to donate, don’t sweat it. I’ve downloaded plenty of freebies over the years, and I consider this my chance to give back — even in such a small way.
As for needing a vector of DC, let me see what I can do. Do you need the same style as the other vector states?
Thanks. These are awesome.
Brian, my pleasure. Thanks for the comment.
Amazing… these will be used on our website with a slight color change… really hit the spot. Appreciate it.
Thanks for stopping by and commenting. I hope these icons work for your website. When you get them posted, let me know. I’d love to take a look at how they are being used. Cheers.
Thanks for doing these. They’re terrific.
Thanks for these vectors. These are perfect. My project was created more efficiently because of your efforts. Glad tidings
Hi Jenna. So glad to hear these were useful to you. What was your project?
how did you get that checked shadow???
Hi Suraj. What checked shadow are you referring to?
[…] I started my self-imposed homework, I used state outlines from here and fonts from the sites […]
Thanks so much for these icons!
I used them for localized advocacy (similar to Google’s GYBO.com) at http://www.VaccinateYourDoctors.org
I would love to get the PNG icon for DC. And if I’m not being too greedy, any chance of one for Puerto Rico?
What a fantastic help! Exactly what I was looking for. And I figured out enough AI with your assist that I was able to quickly convert colors that fit my project perfectly! I need to pay this forward! ;P
thank you, for very helpful freebie, i’ve download the PNG version
I was wondering if you had any vectors of tx in different colors. Possibly in a similar format to the one at the bottom of the website listed above.
Thanks for sharing these and your time. Just what I was looking for.
Cheers and have a good day.
These are GREAT! I’m pretty sure that your work has saved my sanity .. perhaps my life as well. Thanks so much for sharing! 😀
Thanks, I will use them in my App.
Hi Josh Using the state of Wisconsin for my site and I didn’t even have to change the color!
Thank You Andy
Hi Andy. Just checked out your site. Looks great! Glad you could use the state vector, and was more than happy to provide it. Take care!
Thanks for making these! I am using them for infographics. I too was wondering if you could make one for DC. Thanks!
Thanks! Downloaded these for use in CS6 (the CS4 versions appear to work fine) for an infographic wedding program for my sister.
Hi Bonnie. I’d love to see the infographic if you are open to emailing it to me. Glad the vectors could be of some use. Cheers!
BTW, do you have a vector image of the whole map?
Hi Bonnie. I’m sorry, but I do not have a vector of the entire map.
I was so happy to find these so I don’t have to do them all myself! When I opened up the CS4 & CS3 versions in CS5 I’m only seeing 1 state. Am I doing something wrong?
I just opened the CS4 version within CS5, and the only state visible is Alabama. Over in the Layers Panel, you should see the other states on individual layers with visibility set to off, which is why only one state is visible.
Does that help?
Perfect! That was it!
I found these icons very helpful for the mobile version of my directory of US Public libraries:
Thanks for making these available.
Awesome. Looks really good, Marshall. Thanks for sharing!