Social Media Icons for maps

by | Learn how to

Why Add Social Media Icons to Your Maps?

In today’s connected world, social media helps people discover and engage with your brand. Your interactive map is the perfect place to add clickable social media icons that let visitors instantly connect with you online.

These small but powerful links create a seamless experience for your map visitors, helping them:

  • Find your social profiles with one click
  • Stay updated on your latest news
  • Engage with your content across platforms

If you’re embedding your map on a website that already includes social media icons, adding them to your map is optional—it’s most useful when the map is viewed on its own.

Benefits of Social Media Icons

Whether you’re showcasing businesses, events, or travel destinations, adding social media icons delivers several advantages:

Build a Stronger Social Media Presence

Direct your website visitors to your social accounts in just one click. Increase your reach and grow your brand’s popularity across platforms.

Attract New Followers

Show visitors that you’re active on social media. Inspire your map viewers to become loyal followers who engage with your content regularly.

Enhance Communication

Demonstrate that you’re accessible to your audience by giving them an easy way to reach you. Create more opportunities for meaningful connections.

Where to Place Social Icons on Your Map

You can add social media buttons in different areas of your map. Here are recommendations based on your specific needs:

Map Home (Recommended)

This is the most visible location since it appears when the map first loads. Keep your description short so the social buttons remain fully visible without scrolling.

Locations

Perfect for business directories or city guides. Add icons for each business so visitors can follow or contact them directly.

Category Listings

Ideal for maps where each category represents a different entity. For example, a multinational company map with categories for different regions could display region-specific social media links.

How to Add Social Media Icons to Your Map

We’ve created a simple solution you can copy and paste into your map description. Our snippet supports these popular platforms:

  • Facebook
  • X (formerly Twitter)
  • Instagram
  • LinkedIn
  • YouTube
  • TikTok
  • WhatsApp

Need a different social network? Contact our support team for assistance.

Step 1: Add the Style

  1. Go to Appearance > CSS
  2. Enable CSS
  3. Copy and paste the CSS snippet below
/* social media icons styling */
.social-bar-row {
  display: flex;
  justify-content: center;
}
.social-bar-column {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-right: 20px !important;
  padding-left: 0px !important;  
}

Step 2: Add the Icons

Copy and paste the icon HTML block below for each social media platform you want to show. The icons will appear side by side, from left to right, in the order you add them.

Don’t forget to replace “LINK-HERE” with the actual URL to your social media profile.

Once you are done, to group the icons on the same line, add this line before the first icon block:   <div class="social-bar-row">

and at the bottom of all the icon HTML block, add:   </div>

<!-- Facebook -->
<div class="social-bar-column">
  <a href="LINK-HERE" target="_blank" rel="noopener">
    <img src="https://static-resources.mapme.com/ps/images/social-network-icons/facebook.svg" alt="Facebook" style="width: 24px;">
  </a>
</div>
<!-- X (formerly Twitter) -->
<div class="social-bar-column">
  <a href="LINK-HERE" target="_blank" rel="noopener">
    <img src="https://static-resources.mapme.com/ps/images/social-network-icons/x.svg" alt="X" style="width: 24px;">
  </a>
</div>
<!-- Instagram -->
<div class="social-bar-column">
  <a href="LINK-HERE" target="_blank" rel="noopener">
    <img src="https://static-resources.mapme.com/ps/images/social-network-icons/instagram.svg" alt="Instagram" style="width: 24px;">
  </a>
</div>
<!-- LinkedIn -->
<div class="social-bar-column">
  <a href="LINK-HERE" target="_blank" rel="noopener">
    <img src="https://static-resources.mapme.com/ps/images/social-network-icons/linkedin.svg" alt="LinkedIn" style="width: 24px;">
  </a>
</div>
<!-- YouTube -->
<div class="social-bar-column">
  <a href="LINK-HERE" target="_blank" rel="noopener">
    <img src="https://static-resources.mapme.com/ps/images/social-network-icons/youtube.svg" alt="YouTube" style="width: 24px;">
  </a>
</div>
<!-- TikTok -->
<div class="social-bar-column">
  <a href="LINK-HERE" target="_blank" rel="noopener">
    <img src="https://static-resources.mapme.com/ps/images/social-network-icons/tiktok.svg" alt="TikTok" style="width: 24px;">
  </a>
</div>
<!-- WhatsApp -->
<div class="social-bar-column">
  <a href="https://wa.me/YOUR-NUMBER" target="_blank" rel="noopener">
    <img src="https://static-resources.mapme.com/ps/images/social-network-icons/whatsapp.svg" alt="WhatsApp" style="width: 24px;">
  </a>
</div>
<!-- Website -->
<div class="social-bar-column">
  <a href="LINK-HERE" target="_blank" rel="noopener">
    <img src="https://static-resources.mapme.com/ps/images/social-network-icons/website.svg" alt="Website" style="width: 24px;">
  </a>
</div>

Pro Tip: For WhatsApp, use https://wa.me/ followed by your full phone number with country code (example: https://wa.me/+18003005000)

Map Example with Social Media Icons

When properly added, your icons will display horizontally in the description area, like in this live map example.
👉 View Example

Customizing the Social Media Bar

You can easily adjust the appearance of the social media bar by updating the style settings. For example, you can tweak the padding values to change the spacing between icons.

To change the icon size, edit the style=”width: 24px;” value in the HTML.
We recommend a maximum size of 30px to keep the layout clean and balanced.

Changing the Icon Style

We offer four icon style variations, each with a simple and consistent naming convention:

  1. Colored Version
    Default version (no suffix)
    facebook.svg
  2. Black Version
    Add -black to the filename
    facebook-black.svg
  3. Black Circle Version
    Add -black-circle to the filename
    facebook-black-circle.svg
  4. white Version
    Add -white to the filename
    facebook-white.svg

This naming pattern applies to all available icons, making it easy to switch between styles by modifying the filename.

Frequently Asked Questions

What are Social Media Icons?

They’re small, clickable icons that link to your social media pages. You can add them anywhere on your map to encourage more interaction and visibility.

Why Should I Use Them?

Adding social icons boosts visibility, engagement, and traffic to your social channels. It also helps build trust and gives users more ways to connect with you.

Which Platforms Can I Add?

We support all major platforms—and more! If you’re missing one you need, let us know and we’ll help.

Where Should I Place the Icons?

It depends on your map:

  • Use Map Home for general icons
  • Use Categories for region- or group-specific accounts
  • Use Locations for individual business pages

What happens if a social media platform changes its logo?

No need to worry—our icons are kept up to date automatically. If a platform updates its branding or logo, your map will reflect the new design without you having to make any changes.

Want help setting it up? Contact our support team—we’re happy to assist!

Start free trial

v

Need Help?

Chat or use Contact Form

Getting Started

Watch the 2-min-tutorial

What's New