1. Freebies
  2. Icons
  3. Clean Google Map Icon Set
Clean Custom Google Maps Icons

Clean Custom Google Maps Icons

We created a set of clean custom Google Maps icons to make your website's map a little cooler. We've also included a Google Maps icon vector & variously colored custom icon PNGs so you can coordinate them with your own designs.

Adding your own Google Maps custom icon is easier then most folks think. While it's mostly an aesthetic change, customizing your map icons works wonders for a website's design. An embedded Google Map will generally look out of place on a website, which is to be expected since one color theme can't really fit them all. By making the small change customizing your own Google map icons, you can cross that barrier and tie the whole look together. Follow these quick steps to coordinate your map within 5 minutes and if you'd like to build your own, we've even included a fancy layered Google Maps icon vector at the bottom of the page.

Create Your Basic Google Map
Google Maps Custom Icon Set
  • Step One: Search for your location on maps.google.com
  • Step Two: Select the map type you want
  • Step Three: Adjust the map to your desired center & zoom level
  • Step Four: Click on "Link" to get your embed code
  • Step Five: Copy & Paste the embed html. All Done.

Find Your Favorite Google Maps Custom Icon

Now that you have the map you'd like to customize, it's time to include your custom Google Maps icons. While we've included a vector icon for you to use, you would normally need to convert those to PNG's to upload them. Luckily for you, we've already converted those Google Maps icons PNG for you. We'll show you how to insert a PNG icon next, but if you'd like to find another design we'd recommend checking out MAKI, Map Icons, Fusiontables, or Map Icons Designer. Find your favorite design or download the Google Maps custom icon below and follow up with the next couple steps.

Inserting Your Custom Google Maps Icon

  • Step One: As long as you're signed in - Open your map
  • Step Two: Click on the layer you want to add the icon to
  • Step Three: Click on the paint can icon and click "More Icons"
  • Step Four: Click image URL, enter the web address, & click OK

Customize Our Google Maps Icon Vector However You Want

If you don't love any of the icons above and have software to edit vectors, you can just edit the Google Maps icon vector we've included. It contains the basic marker form along with layers that you can easily tailor in one click. There are plenty of options already setup for you, all you need to do enable the effects you want. You'll also notice that your icons need to available online. Don't worry though, if you don't have a server of your own you can simply use a free image folder like Photobucket.

If you like our Google Maps custom icon set & vector please feel free to share with the buttons below. If you have ideas on how to make an even sweeter Google Map, please feel free to hit us up on your favorite social website. If you like the icons, please tell some friends and as always - Thanks for stopping by!

Related Articles
  • 20+ Free iPhone PSD and iPad Mockup PSDs
    Free mockups usually lack in quality, but this collection of iOS Mockups (including iPhone psd & iPad Mockup psds) will give you all of the quality at none of the price.
    20+ Free iPhone PSD and iPad Mockup PSDs
  • Beautiful CSS3 Button Set
    A concisely coded CSS3 button set increases usability across the board, gives you a ton of options, and keeps all the code involved to an absolute minimum.
    Beautiful CSS3 Button Set
  • Creative Commons Icon Sprite
    Like a lot of designers, I find time-management to be tricky at times. That's why I constructed this Creative Commons icon sprite to easily handle project attribution in just 3 steps.
    Creative Commons Icon Sprite
  • Normy GUI Elements | Volume Two
    Our latest UI project called Normy GUI Elements, is an incredible collection of user interface elements. Minimalists and UX purists should find this PSD a helpful hand in constructing a solid interface.
    Normy GUI Elements | Volume Two
  • Optimizing Development Workflows
    Efficient workflows and workflow patterns are key to effective web development. Learn how to streamline your workflow with this web development tutorial.
    Optimizing Development Workflows
  • The Absolute Best Lazy Load Javascripts
    In a field dominated by imagery, using the best lazy load javascripts possible can help you deliver amazing impact without becoming an absolute drag on your pageload times.
    The Absolute Best Lazy Load Javascripts
Written By:
Matthew Haeck

Greetings, I'm the lead designer and resident full stack web developer at Haeck Design. A majority of my time is spent creating beautiful logos, websites, print design, & staying up to date on all the tricks of the web development trade. (Matthew Haeck Bio Page)

Haeck Design - Stamp Logo