How to Create Social Media Icons with Pure CSS (No Images) 2026

You can create fast-loading social media icons with pure CSS and no image files at all. Years ago we replaced the image-based social buttons in our sidebar with styled letters: Facebook became an “f” on blue, Twitter a “t” on light blue. They looked almost the same, loaded instantly and cut several server requests. The idea still works in 2026, with updated brand colours and Google+ long gone. Here’s how to make CSS social media icons, plus a modern inline SVG option.

Quick answer: Wrap a few links in a container, give each link a short text label (f, X, in, ▶) and a class, then style them in CSS with the brand background colour, white text, padding and border-radius. Add an aria-label to each link for accessibility. For sharper logos with no extra requests, paste inline SVG icons instead of letters.

Why make social media icons with pure CSS?

• No extra downloads: no image files or icon font to load, so nothing to lazy load.
• Sharp at any size and easy to recolour.
• No third-party scripts that slow pages or track visitors.

Step 1: The HTML

Add this where you want the icons, such as a Custom HTML widget or block:

<div class="social-icons">
  <a class="si facebook" href="https://www.facebook.com/yourpage" aria-label="Facebook" target="_blank" rel="noopener">f</a>
  <a class="si x" href="https://x.com/yourhandle" aria-label="X (Twitter)" target="_blank" rel="noopener">X</a>
  <a class="si linkedin" href="https://www.linkedin.com/company/yourpage" aria-label="LinkedIn" target="_blank" rel="noopener">in</a>
  <a class="si youtube" href="https://www.youtube.com/@yourchannel" aria-label="YouTube" target="_blank" rel="noopener">&#9654;</a>
  <a class="si whatsapp" href="https://wa.me/910000000000" aria-label="WhatsApp" target="_blank" rel="noopener">W</a>
</div>

Step 2: The CSS

Add this to Appearance > Customize > Additional CSS or your stylesheet:

.social-icons { display: flex; gap: 8px; margin: 10px 0; }
.si {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: #fff; font: 700 18px/1 Georgia, serif;
  text-decoration: none; transition: transform .15s;
}
.si:hover, .si:focus { transform: translateY(-2px); color: #fff; }
.facebook { background: #1877F2; }
.x        { background: #000; }
.linkedin { background: #0A66C2; }
.youtube  { background: #FF0000; font-size: 14px; }
.whatsapp { background: #25D366; }

Use border-radius: 6px for rounded squares instead of circles, and change the width, height and font size for bigger icons. Georgia is a web safe font, so it renders the same everywhere.

Modern option: inline SVG icons

Letters are fast, but real logos are clearer. Inline SVG gives you both: copy a brand icon’s SVG code from Simple Icons (free brand icons) and paste it inside the link instead of the letter. Add this CSS:

.si svg { width: 20px; height: 20px; fill: currentColor; }

It is still part of the page, so no extra requests. Icon libraries such as Font Awesome are another route; here’s how to add Font Awesome icons to any website, though they add a stylesheet and font file.

What changed since the original version

• Google+ closed in 2019; its “g+” icon is gone.
• Twitter is now X with a black brand colour.
• Facebook and LinkedIn updated their blues.
• Flexbox and gap replace manual margins, and the old -webkit-/-moz- prefixes for border-radius are no longer needed.

Want share buttons too? See how to make floating social share icons with Bootstrap 5.

FAQ

Are CSS icons accessible?

Yes, with an aria-label on each link so screen readers announce the network name instead of “f”.

Can I use brand logos freely?

Brands allow their logos for linking to your profiles, but follow their guidelines and don’t alter the logo shape.

Do these icons work in dark mode?

Yes. The brand backgrounds stay visible; for X, add a light border in dark mode.