tabler/docs/ui/plugins/social-icons.mdx

---
title: Social Icons
summary: Social icons are a great way to make your website more engaging and user-friendly. You can use social icons to help users quickly find your social media profiles and connect with you.
plugin: socials
libs: tabler-socials
description: Connect users to your social profiles.
---

## Installation

This part of Tabler is distributed as plugin. To enable it you should include `tabler-socials.css` or `tabler-socials.min.css` file to your page.

You can also include plugin via CDN:

```html
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-socials.min.css">
```

## Social icons

To create a social icon, add the `social` class to a component and choose the country whose flag you want to use. 

```html example centered separated plugins="socials"
<span class="social social-app-facebook"></span>
<span class="social social-app-x"></span>
<span class="social social-app-instagram"></span>
```

## Social apps list

Here is a list of all available social apps:

<SocialsTable apps={[
  {
    "name": "Apple",
    "file": "apple"
  },
  {
    "name": "Discord",
    "file": "discord"
  },
  {
    "name": "Dribbble",
    "file": "dribbble"
  },
  {
    "name": "Facebook",
    "file": "facebook"
  },
  {
    "name": "Figma",
    "file": "figma"
  },
  {
    "name": "GitHub",
    "file": "github"
  },
  {
    "name": "Google",
    "file": "google"
  },
  {
    "name": "Instagram",
    "file": "instagram"
  },
  {
    "name": "LinkedIn",
    "file": "linkedin"
  },
  {
    "name": "Medium",
    "file": "medium"
  },
  {
    "name": "Meta",
    "file": "meta"
  },
  {
    "name": "MetaMask",
    "file": "metamask"
  },
  {
    "name": "Pinterest",
    "file": "pinterest"
  },
  {
    "name": "Reddit",
    "file": "reddit"
  },
  {
    "name": "Signal",
    "file": "signal"
  },
  {
    "name": "Skype",
    "file": "skype"
  },
  {
    "name": "Snapchat",
    "file": "snapchat"
  },
  {
    "name": "Spotify",
    "file": "spotify"
  },
  {
    "name": "Telegram",
    "file": "telegram"
  },
  {
    "name": "TikTok",
    "file": "tiktok"
  },
  {
    "name": "Tumblr",
    "file": "tumblr"
  },
  {
    "name": "Twitch",
    "file": "twitch"
  },
  {
    "name": "VK",
    "file": "vk"
  },
  {
    "name": "X (Twitter)",
    "file": "x"
  },
  {
    "name": "YouTube",
    "file": "youtube"
  }
]} />