It’s actually pretty easy to make your own Mailchimp social media icons for your email campaigns.
Here is exactly what I do:
- You first need to make your colored icons. I use Flaticon.com. You’ll sign up for a free account and then search “Instagram,” for example, and pick the icon you want to use.
- From there you can click EDIT ICON and you will choose the exact color you would like your icon to be. Enter your brand’s HEX colors at this step.
- Download a PNG file of your colored icon. I usually do 32px size.
- Then you will go into Mailchimp and head to your Content Studio > My Files. Upload the images of your new custom-color social icons.
- You will then click on the actual file in Mailchimp and then click “View Details” and then click COPY URL. This is the URL you will need for your coding.
Now the easy part!
- Now head to your email campaign and you will drag in a “Code Block” wherever you want your icons.
- PASTE IN THIS CODE and we will soon put in that link you just copied.
<style type="text/css">
.social { font-family: 'Lucida Sans Serif', sans-serif; size: 10px; }
.social img { width:35px; height: auto; }
.social a {text-decoration: none;}
.social a:hover { color: #ffffff; }
.social ul { list-style-type: none; margin-right:40px; text-align: center; }
.social li { display: inline-block; margin: 10px; }
</style>
<div class="social">
<ul>
<li><a href="https://www.twitter.com/emilyryantweets" target="_blank"><img src="https://mcusercontent.com/73b7dc46becfe523a3c6cbd58/images/ce277f61-a3df-ffd9-6fc0-a0756260241d.png"></a></li>
<li><a href="https://instagram.com/emilyryanlikes" target="_blank"><img src="https://mcusercontent.com/73b7dc46becfe523a3c6cbd58/images/0e498196-ce63-f6eb-509f-ea1173064000.png"></a></li>
</ul>
</div>
NOW, SIMPLY REPLACE THE LINKS IN THE CODE.
You can edit the code above and put in YOUR social media handles for each button (you see here – emilyryantweets and emilyryanlikes) – REPLACE with your handles.
And then PASTE in that URL you copied of your first social icons where you see the link “mcusercontent” – Make sure you paste between the quotes.
You’ll need to go back to your Content > My Files in Mailchimp and upload your other icons and grab those other links and repeat this for each.
That’s it! You should have pretty, custom-colored icons now!