Bootstrap 5Utilities

Bootstrap 5 Social Icons

Social Icons in Bootstrap 5 are inline icon links — typically using icon fonts like Bootstrap Icons, Font Awesome, or SVGs — styled to represent and link to social media profiles such as Twitter/X, LinkedIn, Instagram, GitHub, and YouTube. They're most commonly placed in footers, author bios, hero sections, and contact pages. Use them when you need compact, recognisable brand links without relying on text labels.

Primary Class

.social-icons

Common Use Cases

→Footer navigation bar displaying links to a company's LinkedIn, Twitter/X, YouTube, and GitHub profiles as icon-only buttons
→Team member cards on an About page showing each person's personal LinkedIn and Twitter handles via small circular icon badges
→Blog post author bio section with inline icon links to the author's social presence, sitting next to their name and headshot
→Contact page supplementing a contact form with direct social channel icons so visitors can reach the brand on their preferred platform

Variants & Classes

Variant	Description	Classes
Social Icons Default	Standard social icons with Bootstrap's default styling.	`social-icons`
Social Icons Responsive	Responsive variant that adapts to different screen sizes.	`social-icons social-icons-responsive`

Code Example

<div class="d-flex gap-3 align-items-center">
  <a href="https://twitter.com/yourhandle" class="text-secondary fs-5" aria-label="Follow us on Twitter" target="_blank" rel="noopener noreferrer">
    <i class="bi bi-twitter-x"></i>
  </a>
  <a href="https://linkedin.com/company/yourcompany" class="text-secondary fs-5" aria-label="Connect on LinkedIn" target="_blank" rel="noopener noreferrer">
    <i class="bi bi-linkedin"></i>
  </a>
  <a href="https://github.com/yourorg" class="text-secondary fs-5" aria-label="View our GitHub" target="_blank" rel="noopener noreferrer">
    <i class="bi bi-github"></i>
  </a>
  <a href="https://youtube.com/@yourchannel" class="text-secondary fs-5" aria-label="Watch on YouTube" target="_blank" rel="noopener noreferrer">
    <i class="bi bi-youtube"></i>
  </a>
  <a href="https://instagram.com/yourprofile" class="text-secondary fs-5" aria-label="Follow on Instagram" target="_blank" rel="noopener noreferrer">
    <i class="bi bi-instagram"></i>
  </a>
</div>

Live Examples

Basic Social Icons

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated social icons with custom colours
✓Social Icons with interactive states
✓Responsive social icons for all screen sizes

Best Practices

Always include aria-label on icon-only links

Since social icons carry no visible text, screen readers need an aria-label like 'Follow us on LinkedIn' to announce the link's purpose — skipping this is a WCAG 2.1 Level A failure.

Use Bootstrap's gap utility instead of manual margins

Wrap icons in a flex container with gap-2 or gap-3 rather than adding me-2 to each icon — this keeps spacing consistent and makes it trivial to adjust all gaps at once.

Control hover colour with a single CSS custom property override

Add a hover state like a:hover .bi { color: #1d9bf0; } scoped to your footer or card component so each icon can adopt its native brand colour on hover without writing a rule per network.

Set rel='noopener noreferrer' on every third-party social link

target='_blank' without rel='noopener noreferrer' exposes your page to reverse tabnapping — always pair them together on links that open a new tab.

FAQ

Which icon library works best with Bootstrap 5 for social icons?

Bootstrap Icons (bi bi-*) is the natural first choice because it's maintained by the Bootstrap team, ships with social icons for all major platforms including Twitter/X, TikTok, LinkedIn, GitHub, and Discord, and adds zero dependency conflicts. Font Awesome 6 Free is a solid alternative if you need a broader icon set or are already using it elsewhere in a project. Avoid mixing multiple icon libraries on the same page — the extra HTTP requests and potential class name collisions aren't worth it.

How do I make social icons match my brand's colour scheme rather than using Bootstrap's text-* utilities?

The cleanest approach is to define a CSS variable on the icon wrapper — for example, --icon-color: #0a66c2 for LinkedIn — and apply it with color: var(--icon-color). If you want per-icon brand colours, add a utility class per network like .icon-linkedin { color: #0a66c2; } and .icon-github { color: #333; }. Bootstrap's text-primary, text-secondary, and text-body-secondary utilities are fine for monochrome icon sets but won't give you per-brand fidelity out of the box.

How does Canvas Builder generate social icon components?

When you describe a social icons section — for example, 'add LinkedIn, GitHub, and Twitter icons to the footer' — Canvas Builder outputs production-ready HTML using Bootstrap Icons with the correct bi bi-* classes, wraps them in a d-flex gap-3 container, applies your site's configured brand colour via a text-* utility or inline CSS custom property, and includes aria-label attributes on every anchor. The output is responsive by default, inheriting flex-wrap behaviour so icons reflow cleanly on mobile viewports.