Social icons

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

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:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/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.

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

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

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

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

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.

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.