---
title: Social icons
summary: Social icons show the brand mark of a social network in a fixed-size colored square, for linking to your profiles.
description: Add social media icons with the socials plugin. Link users to your profiles with recognizable, consistently styled buttons.
css-plugins: [socials]
source: core/scss/ui/_social.scss
classnames:
  component:
    - class: social
      desc: Container element, a square holding one brand mark
  style:
    - class: social-gray
      desc: Grey version of the mark, for a row that should stay quiet
  color:
    - class: social-app-{app}
      desc: The brand to show, for example social-app-github or social-app-x
  size:
    - class: social-{size}
      desc: From social-xxs to social-2xl; the default matches an avatar
---

import Example from '@components/Example.astro'
import Socials from '@components/Socials.astro'
import CdnImportPlugin from '@components/CdnImportPlugin.astro'

## Installation

Social icons are a plugin. Include `tabler-socials.css` or `tabler-socials.min.css` in your page to enable them.

You can also include the plugin via CDN:

<CdnImportPlugin plugins={['socials']} />

## Social icons

Add the `social` class to an element and a `social-app-*` class with the name of the service.

<Example centered>
<span class="social social-app-facebook"></span>
<span class="social social-app-x"></span>
<span class="social social-app-instagram"></span>
</Example>

## Social icon sizes

Social icons use the same size scale as avatars, from `social-xxs` up to `social-2xl`.

<Example centered>
<span class="social social-2xl social-app-facebook"></span>
<span class="social social-lg social-app-facebook"></span>
<span class="social social-app-facebook"></span>
<span class="social social-sm social-app-facebook"></span>
<span class="social social-xs social-app-facebook"></span>
</Example>

## Grayscale icons

Add `social-gray` for a gray version of the mark. Use it where a row of brand colors would pull attention away from the content, for example in a footer.

<Example centered>
<span class="social social-gray social-app-facebook"></span>
<span class="social social-gray social-app-x"></span>
<span class="social social-gray social-app-instagram"></span>
<span class="social social-gray social-app-github"></span>
</Example>

## Icons as links

The icon element carries no text, so wrap it in a link and name that link. Keep the name in a `visually-hidden` span, or use `aria-label`.

<Example centered>
<a href="#" class="d-inline-block" aria-label="Tabler on GitHub"><span class="social social-app-github"></span></a>
<a href="#" class="d-inline-block" aria-label="Tabler on X"><span class="social social-app-x"></span></a>
</Example>

## Social apps list

All available services:

<Socials />

## Accessibility

- A brand mark is a picture, not a name. Put the service in text next to it, or in an `aria-label` on the link - "Follow us on Mastodon" says more than "Mastodon".
- The icon element is decoration, so give it `aria-hidden="true"` when the name is already in text.
- A row of social links belongs in a list inside a `nav` with an `aria-label`, so it can be skipped as a group.
- Links that open a new tab should say so. Add it to the accessible name, for example "Mastodon (opens in a new tab)".
- Brand colors are picked to be recognizable, not readable. Check the contrast when you put a brand color on text or on a light background.