Free Social Media Icon HTML Generator

Create SVG social media icons with custom colors, shapes, and sizes. FB, Instagram, TikTok, Threads and more! Just copy and paste the HTML code and add them to your website. Create your social buttons below!

1 Choose Your Social Icons

[ Please enable javascript and refresh the page. ]

2 Choose Your Background Shape

3 Customize Size and Color!


4 Add Your Social Media Links!

Enter the URLs to your social profiles

Get Your HTML Code

Select a donation amount to continue

(After you donate through PayPal, select "Back to Merchant" to return and get your buttons.)

Stuck? Here’s How to Generate the html for your social media buttons.

Okay. Here is how to use free social media icon generator above.

  1. First, select the social media icons you wish to use (Facebook, TikTok, Instagram, etc.). You can choose as many social networks as you like and they will populate in the preview bar.
  2. Customize your social icons by choosing the background shape. Choose a style that goes with your website.
  3. Now you can select a color theme. Select a color that matches the color scheme of your website.
  4. The next section needs the URL of your social network accounts. Go. to each social network that you are adding and copy and paste the URLs of your social media profiles next to the corresponding icons.
  5. Select a support amount. (Free is an option, but your support helps me improve the site!)
  6. Click “Get My Buttons” (If you decide to donate, you will be redirected to PayPal. Make your donation and then click “Back to Merchant” to get your code)

You will be provided with a snippet of HTML code that includes vector social icons that you can copy and paste into your website. Because these are vector icons, they do not rely on hosted images and they do not need to interact with the website to work. This means could disappear tomorrow and your buttons will still work. I recommend pasting the code into a plain text document for safekeeping. But be careful, using a word processing app (like word or Google docs) can add formatting that may break the code.

Adding the HTML Social Icons to Your Website

Most website builders will have designated ways to insert HTML code. If you’re not sure where to paste the code, you will need to contact your web host, web designer, or developer for help. I’ve also provided a few links below that may be of use. More answers can be found in our FAQ section.

Frequently Asked Questions

Where to paste the code for my social media icons?

How to add your social media icons to Squarespace

How to add your social media icons to Wordpress

Social Follow Icons vs. Social Share Buttons

When it comes to social media icons and buttons, there are two major players in the game: follow icons and share buttons. But what’s the deal with each, and why should you care? Well, here’s the breakdown:

Social Follow Buttons

Follow buttons are all about guiding your website visitors to your social media profiles so they can “follow” you. That’s what this page helps you create. Once yo9u have installed them on your website, when someone clicks on your icons and BOOM—they land on your brand’s Facebook, TikTok, or Instagram page. It’s here that people can hit “follow” and join your online community.

What About Share Icons?

On the flip side, you’ve got share buttons. These handy little social buttons let people share your content—like a blog post or a product—straight from your website to their social media profiles. It’s a quick and easy way for your visitors to share your content with their followers on social media.

Create a Social Share Button Here

Which Social Media Method is Best For You?

Should you go with social follow icons or share buttons? Well, we recommend both! Follow buttons create more followers and share buttons get more eyes on your website. Both are needed to grow your audience online and they compliment each other.

Subscribe to the Nifty News

* indicates required

Promo Code Disco

Find discounts on your favorite online services and products.