• Email
  • Linkedin
  • Twitter
  • Home
  • About
  • Blog
  • Gallery of Work
  • Contact Me

50 free U.S. state vector icons

preview of state icons

 

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)

  • CS4 version
  • CS3 version
  • CS2 version
  • CS version
  • PNG files
Tweet
design, downloads, freebies, icons, illustrator, vector

35 comments on “50 free U.S. state vector icons”

  1. Chris Cree says:
    April 16, 2011 at 5:13 pm

    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! 🙂

    Reply
  2. Oracal USA mobile app design | says:
    May 3, 2011 at 5:03 pm

    […] also created icons for each state to be used in our U.S. distributor locater screen. For the international distributors, I created […]

    Reply
  3. Jody Reed says:
    June 5, 2011 at 11:55 am

    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.

    Reply
  4. kenny says:
    August 8, 2011 at 11:39 am

    ?Is there anyway I can donate for this. Also can you do one for DC?

    Reply
    • Josh Jackson says:
      August 8, 2011 at 9:40 pm

      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?

      Reply
  5. Brian C says:
    October 17, 2012 at 10:39 am

    Thanks. These are awesome.

    Reply
    • jjackson says:
      November 14, 2012 at 1:59 pm

      Brian, my pleasure. Thanks for the comment.

      Reply
  6. Wholesale Energy says:
    November 2, 2012 at 10:46 am

    Amazing… these will be used on our website with a slight color change… really hit the spot. Appreciate it.

    Reply
    • jjackson says:
      November 14, 2012 at 2:00 pm

      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.

      Reply
  7. parry - kickstart says:
    November 25, 2012 at 4:59 pm

    Thanks for doing these. They’re terrific.

    Reply
  8. jenna says:
    December 25, 2012 at 5:48 pm

    Josh~
    Thanks for these vectors. These are perfect. My project was created more efficiently because of your efforts. Glad tidings

    Reply
    • jjackson says:
      January 9, 2013 at 1:59 pm

      Hi Jenna. So glad to hear these were useful to you. What was your project?

      Reply
  9. Suraj says:
    January 4, 2013 at 12:39 pm

    how did you get that checked shadow???

    Reply
    • jjackson says:
      January 9, 2013 at 1:58 pm

      Hi Suraj. What checked shadow are you referring to?

      Reply
  10. Engelblog says:
    January 6, 2013 at 3:31 pm

    […] I started my self-imposed homework, I used state outlines from here and fonts from the sites […]

    Reply
  11. Nick Semenkovich says:
    January 17, 2013 at 11:01 pm

    Thanks so much for these icons!

    I used them for localized advocacy (similar to Google’s GYBO.com) at http://www.VaccinateYourDoctors.org

    – Nick

    Reply
  12. Carol says:
    February 19, 2013 at 11:38 pm

    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?

    Reply
  13. Dan Spurgin says:
    May 8, 2013 at 12:34 pm

    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

    Reply
  14. joe says:
    June 17, 2013 at 4:57 am

    thank you, for very helpful freebie, i’ve download the PNG version

    Reply
  15. DeShoun says:
    August 21, 2013 at 4:52 pm

    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

    Reply
  16. Stuart says:
    October 2, 2013 at 1:32 pm

    Thanks for sharing these and your time. Just what I was looking for.

    Cheers and have a good day.

    Reply
  17. Mary says:
    October 17, 2013 at 3:59 pm

    These are GREAT! I’m pretty sure that your work has saved my sanity .. perhaps my life as well. Thanks so much for sharing! 😀

    Reply
  18. Ammar Kamel says:
    January 6, 2014 at 8:41 am

    Thanks, I will use them in my App.
    Great JOB

    Reply
  19. Andy says:
    March 9, 2014 at 6:52 pm

    Hi Josh Using the state of Wisconsin for my site and I didn’t even have to change the color!

    Thank You Andy

    Reply
    • jjackson says:
      March 9, 2014 at 7:00 pm

      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!

      Reply
  20. Shalini says:
    August 22, 2014 at 7:03 am

    Hi Josh,
    Thanks for making these! I am using them for infographics. I too was wondering if you could make one for DC. Thanks!

    Reply
  21. Bonnie says:
    September 7, 2014 at 12:46 pm

    Thanks! Downloaded these for use in CS6 (the CS4 versions appear to work fine) for an infographic wedding program for my sister.

    Reply
    • jjackson says:
      September 9, 2014 at 4:28 pm

      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!

      Reply
  22. Bonnie says:
    September 8, 2014 at 6:29 pm

    BTW, do you have a vector image of the whole map?

    Thanks!

    Reply
    • jjackson says:
      September 9, 2014 at 4:27 pm

      Hi Bonnie. I’m sorry, but I do not have a vector of the entire map.

      Reply
  23. Lisa Walker says:
    October 30, 2014 at 11:32 am

    Hi Josh!
    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?
    Thanks!

    Reply
    • jjackson says:
      October 30, 2014 at 11:42 am

      Hi Lisa,
      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?

      Reply
      • Lisa Walker says:
        October 30, 2014 at 12:16 pm

        Perfect! That was it!

        Reply
  24. Marshall Breeding says:
    March 22, 2015 at 11:43 am

    I found these icons very helpful for the mobile version of my directory of US Public libraries:
    http://librarytechnology.org/libraries/uspublic/

    Thanks for making these available.

    -marshall breeding

    Reply
    • jjackson says:
      July 26, 2015 at 3:03 pm

      Awesome. Looks really good, Marshall. Thanks for sharing!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

From the Word

“But the Lord is faithful. He will establish you and guard you against the evil one.” — 2 Thessalonians 3:3 Listen to chapter . Powered by BibleGateway.com.

Latest Pins on Pinterest

  • Follow Me on Pinterest

Mile-High Living

I'm a graphic designer with a diverse background—writing, editing, page design, logo design, email design, marketing, social media—based in the beautiful Front Range foothills of Denver, Colorado. The bulk of my roughly 12 years of experience is with print design. During my professional career, I’ve won numerous design awards — something I attribute to my strong work ethic, attention to detail, creative passion, and analytical mind. I have a constant desire to grow, learn, and get better at everything I do.

My specialties are:
Adobe Photoshop, Adobe InDesign, Adobe Illustrator, Adobe Acrobat, Adobe InCopy, Quark XPress, Microsoft Office; graphic design, editing, writing.

Latest from Instagram

[instagram-feed]

(c) 2012 - Joshua Jackson /// Theme powered by Theme Blvd.