Footer Social Icons Widget
Finish your footer with a Follow us heading and a neat row of social icons that look at home on a white footer and a charcoal one alike. By default the icons are drawn in your footer's own text colour, so they match whatever theme you use, and each one fills with its network's brand colour when a visitor points at it.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="social-footer-links" data-profiles="instagram | https://www.instagram.com/example facebook | https://www.facebook.com/example tiktok | https://www.tiktok.com/@example youtube | https://www.youtube.com/@example pinterest | https://www.pinterest.com/example website | https://riverside-cafe.example email | [email protected]"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
Footers are already styled by your theme, so unless you pick a light or dark look in the builder the kit draws this component in inherit mode: no background of its own, text and icon outlines in the footer's current text colour, borders at a translucent grey that works on any background. Hovering or focusing an icon fills it with the network's brand colour and a readable glyph colour. You can show icons only or icons with names, place them left, centre or right, split the named version into two columns for long lists, and add a heading (Follow us by default - type a single hyphen to remove it) and a one-line description. Profiles use the same rules as the other follow widgets: the host name decides the network, email addresses and phone numbers become mailto: and tel: links, and at most 20 profiles are shown.
Method
- Default theme on your page: inherit (colour: currentColor, transparent surfaces); hover: background = brand colour, glyph = the more readable of white or near-black (WCAG contrast)
- Heading default "Follow us"; "-" hides it; description up to 220 characters
- Two-column option: grid of two equal columns for icons with names (max 380 px wide)
Worked examples
Dark footer
Inputs: Theme left on Match page; footer text colour #e5e7eb on #111827
Result: Light grey outline icons; Instagram fills #E4405F with a white glyph on hover
The icons inherit the footer's text colour; only the hover uses brand colours.
Two columns with names
Inputs: display=label, columns=2, six profiles
Result: Three rows of two named links, left aligned, at most 380 px wide
Long names are cut with an ellipsis rather than wrapping the grid.
Limitations
- Inherit mode uses your footer's text colour; if that colour has low contrast with the footer background, the icons will too.
- As an iframe the component cannot read your footer's colours; pick Light or Dark for the iframe version.
- No follower counts - each icon links to your profile.
Where publishers use it
- A dark agency footer where white outline icons turn into brand colours on hover
- A school or club website footer listing Facebook, Instagram, YouTube and a newsletter email in two columns with names
- A Shopify store footer with a short line - New drops first on Instagram - above the icons
- A WordPress block theme where the footer colours change between light and dark mode
Questions
How does it match both light and dark footers?
On your page it is drawn in inherit mode: it has no background of its own and uses the text colour already set on your footer, so black text gives black outlines and white text gives white ones. Only the hover state uses brand colours. If you prefer fixed colours, choose Light or Dark in the builder, or the Brand colours style.
Can I remove the Follow us heading?
Yes. Type a single hyphen (-) as the heading and the icons stand alone; anything else replaces the default text. The heading is a short styled line rather than an HTML heading, so it does not disturb your page's heading order.
How should I order the icons?
Lead with the networks where you actually post. Three to six icons are easier to scan than twelve, and the order of your profile lines is the order shown. Email and phone at the end read naturally as contact options.
Does it work in Elementor, Divi or a block theme footer?
Yes. Paste the code in an HTML widget or Custom HTML block inside the footer template part; on Webflow put it in the footer Symbol, on Squarespace in a Code block of the global footer, on Wix in an Embed element pinned to the footer. The kit draws the icons in a Shadow DOM, so page-builder CSS cannot resize or recolour them by accident.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Footer Social Icons https://a2z.tools/embed/social-footer-links
<a href="https://a2z.tools/embed/social-footer-links">A2Z Tools Footer Social Icons</a>
[A2Z Tools Footer Social Icons](https://a2z.tools/embed/social-footer-links)
Footer Social Icons by A2Z Tools - https://a2z.tools/embed/social-footer-links
Related widgets
-
Follow buttons for up to 20 profiles in brand colours - icons, labels, card, list or tiles. No social scripts.
-
A slim strip of profile icons pinned to the side of the screen that becomes a bottom row on phones.
-
A neat footer row of links to your privacy policy, terms, cookie policy and sitemap, in your own fonts.
-
A footer line like © 2018–2026 Riverside Cafe that moves to the new year on its own every January.
-
Share buttons for 26 networks - inline, floating, mobile bar or one Share button. No social scripts or cookies.
-
One Share button that opens the phone's own share sheet, with a tidy fallback panel on desktop.
