# Social Media Icons > Add free social media icons to any website — Instagram, Facebook, LinkedIn, YouTube, TikTok and more. Brand colours, four layouts. Copy the embed code, no signup. - Canonical URL: https://www.zyff.app/widget-builder/social-media-icons - Status: working - Price: free to build and embed, no signup, no watermark; saving a widget so it can be edited later needs an account, and the paid plans raise the saved-widget and monthly-view ceilings — see https://www.zyff.app/pricing - Processing: runs on Zyff's servers; input is held in memory for the request and never stored Zyff's social media icons widget links visitors to your profiles, free — Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest, Threads, WhatsApp, Telegram, Reddit, GitHub, Spotify, Twitch, Discord, email or your own site. Seventeen networks, in each one's brand colour or a palette of your own, as a row where you paste it, a stacked list with names, a rail pinned to the side, or a tight unlabelled set for a header. No third-party script loads, so nothing on your page reports your visitors to anyone. The output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike. ## How to add social media icons to your website 1. **Add your profiles** — Pick a network and paste the URL of your page on it. An icon with no link is not shown, so a half-finished set never leaves a dead button on your site. 2. **Choose a shape and a layout** — Circles, rounded squares, plain squares or bare glyphs — as an inline row, a stacked list with names, a side rail, or a compact set. 3. **Decide on colours** — Each network's own brand colour, or one colour of your own. Brand colours are recognised without being read, which is most of what makes an icon get clicked. 4. **Copy the embed code** — Paste the container div and script tag where the icons should appear, or download the standalone HTML file. Check the 390px mobile preview before you ship it. ## Features - **Seventeen networks**: The usual ones plus Threads, Discord, Twitch, Spotify and GitHub — and a generic website icon for anything else you want to point at. - **No third-party script**: These are plain links. Nothing from Meta, Google or anyone else is loaded onto your page, so there is nothing to declare in a cookie banner and nothing reporting your visitors. - **Named for screen readers**: Every icon carries an accessible label — the network name, or your own wording. An unlabelled row of glyphs is meaningless to anyone not looking at it. - **Never a dead icon**: A profile with no URL is not rendered, so an unfinished set looks deliberate rather than broken. - **Four layouts**: An inline row, a stacked list with names, a rail pinned to either edge, and a compact unlabelled set that fits inside a header. - **Nothing to slow your page**: No SDK, no iframes, no request to Zyff on page load — the glyphs are inlined in the snippet's own script. ## Specifications | Property | Value | | --- | --- | | Networks | 17: Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest, Threads, WhatsApp, Telegram, Reddit, GitHub, Spotify, Twitch, Discord, email, website | | Profiles | Up to 12 at once | | Layouts | 4 templates: inline row, stacked list, side rail, compact | | Shapes | Circle, rounded square, square, or no background | | Icon size | 24 to 64px | | Third-party scripts | None | | Output | One container div plus one script tag, or a downloadable HTML file | | Price | Free to build; paid plans for saved widgets | ## Frequently asked questions **How do I add social media icons to my website?** Pick each network in Zyff's builder and paste your profile URL, choose a layout, then copy the generated embed code into your page. The whole flow is free with no signup, and the snippet is plain HTML, so it drops into any CMS block that accepts custom code. **What is the difference between this and share buttons?** Direction. These link OUT to your profiles so visitors can follow you. Share buttons post the page the visitor is reading IN to a network so their friends see it. Same glyphs, opposite jobs — and most sites want both, in different places. **Should the icons use brand colours?** Usually yes. An Instagram icon in Instagram's colours is recognised at a glance, and recognition is most of what makes someone click. Matching them to your own palette looks tidier and gets used less — which is a real trade, not a style preference. **Do these icons track my visitors?** No. They are ordinary links, so nothing from Meta or Google loads on your page and no one is told who visited it. The official follow buttons those networks hand out do load their scripts, which is the difference. **How many icons should I show?** Four or five. Every extra one dilutes the rest, and listing a network you post to twice a year sends people to a dead profile — which is worse than not listing it. **Are the icons accessible?** Each one carries an accessible label, so a screen reader announces \"Instagram\" rather than \"link\". You can override the wording per profile, which is worth doing if you have two accounts on the same network. **Can I put them in my header?** Yes — the compact layout is built for it: small, unlabelled, no background. The side rail is the other fixed option, pinned to the left or right edge as the visitor scrolls. **Where do I paste the social icons code?** Wherever they should appear — usually a footer, a contact block, or under a bio. Put the container div in that spot and keep the script tag with it. For the side rail, paste it before the closing body tag instead. **Is the social media icons widget really free?** Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small \"Social icons by Zyff\" link, which is how the tool stays free. Every network is available on the free plan, because which profiles a visitor can reach is the widget's whole function. A paid plan adds the stacked and rail layouts, full colour control and removes the attribution link. ## Related tools - [Social Share Buttons](https://www.zyff.app/widget-builder/share-buttons): Share buttons with no third-party script. - [Back to Top Button](https://www.zyff.app/widget-builder/back-to-top): A scroll-to-top button, with an optional progress ring. - [Team Showcase Widget](https://www.zyff.app/widget-builder/team-showcase): Introduce your team with photos, roles and bios. - [Chat Widget](https://www.zyff.app/widget-builder/chat-widget): One button that opens Telegram, Messenger, Instagram, Viber, LINE or a call.