ProfileCrest Developer Blog — Tutorials & Guides
BADGES & ICONS September 24, 2026 7 min read CodeCrest Editorial Team

The Cleanest Ways to Display Social Media Icons in GitHub Profile README

Direct Answer (TL;DR)

The cleanest way to display social icons on GitHub is using flat Shields.io badges or inline SVGs inside an HTML table row. Add UTM campaign tags (?utm_source=github_readme) to links to track which social channels generate the most inbound developer engagement.

Centered Social Icon Array Snippet

<p align="center">
  <a href="https://linkedin.com/in/yourhandle?utm_source=github"><img src="https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white" /></a>
  <a href="https://x.com/yourhandle?utm_source=github"><img src="https://img.shields.io/badge/X-000000?style=for-the-badge&logo=x&logoColor=white" /></a>
  <a href="https://youtube.com/@yourhandle?utm_source=github"><img src="https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white" /></a>
  <a href="mailto:you@example.com"><img src="https://img.shields.io/badge/Email-CC785C?style=for-the-badge&logo=gmail&logoColor=white" /></a>
</p>

Frequently Asked Questions

❓ Why do badges stack vertically?

Wrap badges in a single <p align="center"> tag on one continuous line to force horizontal inline display.

Build a Visually Stunning GitHub Profile in 60 Seconds

Design Bento grid layouts, verified badges, dynamic memes, and trophies automatically with ProfileCrest.

🚀 Launch Profile GeneratorExplore Templates →