# Social icons

> Social icons show the brand mark of a social network in a fixed-size colored square, for linking to your profiles.

Add social media icons with the socials plugin. Link users to your profiles with recognizable, consistently styled buttons.

Source: https://docs.tabler.io/ui/plugins/social-icons

---

## 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:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.1/dist/css/tabler-socials.min.css" />
```

## Social icons

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

```html
<span class="social social-app-facebook"></span>
<span class="social social-app-x"></span>
<span class="social social-app-instagram"></span>
```

## Social icon sizes

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

```html
<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>
```

## 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.

```html
<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>
```

## 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`.

```html
<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>
```

## Social apps list

All available services:

| App | CSS class |
| --- | --- |
| Apple | `.social-app-apple` |
| Discord | `.social-app-discord` |
| Dribbble | `.social-app-dribbble` |
| Facebook | `.social-app-facebook` |
| Figma | `.social-app-figma` |
| GitHub | `.social-app-github` |
| Google | `.social-app-google` |
| Instagram | `.social-app-instagram` |
| LinkedIn | `.social-app-linkedin` |
| Medium | `.social-app-medium` |
| Meta | `.social-app-meta` |
| MetaMask | `.social-app-metamask` |
| Pinterest | `.social-app-pinterest` |
| Reddit | `.social-app-reddit` |
| Signal | `.social-app-signal` |
| Skype | `.social-app-skype` |
| Snapchat | `.social-app-snapchat` |
| Spotify | `.social-app-spotify` |
| Telegram | `.social-app-telegram` |
| TikTok | `.social-app-tiktok` |
| Tumblr | `.social-app-tumblr` |
| Twitch | `.social-app-twitch` |
| VK | `.social-app-vk` |
| X (Twitter) | `.social-app-x` |
| YouTube | `.social-app-youtube` |

## 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.