Social Media Icons – 8 Free CSS, Bootstrap & Tailwind Sets
Social Media Icons is a pack of eight sets of social icons, follow buttons and share bars, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using .btn, .btn-group, .badge, .card, .list-group and .fixed-bottom where they fit, and Tailwind CSS 4. The logos are inline SVG, so there is no icon font to load and no external request. The sets cover classic brand-colour icon rows, outline and monochrome icons, labelled follow buttons with counts, share bars wired to real share URLs, footer social blocks, animated hover effects, a dark set and a modern CSS set built on popover, anchor positioning, :has() and container queries. Only the copy link button in the modern set uses JavaScript.
A good social icon is a link with a name. A logo on its own tells a screen reader nothing, so every icon here is an aria-hidden SVG inside a link named for the destination, such as uiCookies on GitHub or Share on LinkedIn. Brand colours need checking rather than copying: white on WhatsApp green or Telegram blue falls below 3:1, black logos vanish on a dark page, and YouTube red or Bluesky blue cannot carry white button text at 4.5:1. The sets switch to a dark icon, a near-white icon or a monochrome style in those cases. Icons need a target of about 44 pixels even when the logo is 20, hover effects should also run on keyboard focus, and the networks should be current ones: X rather than Twitter, with Mastodon, Bluesky and Threads alongside the established platforms.
