component :: Social Media Links

The .socialMedia component consists of an unordered list of links to social media accounts and their corresponding icons.

File	Description	Source
`component.socialMedia.css`	All social links styles (`.socialMedia`)	Github

The following 4 sizes and 19 icons (18 social media platforms + 1 generic link icon) are available out of the box.

Platform	Icon
Unknown URL
Discord
Facebook
Github
Instagram
Linkedin
Pinterest
Reddit
Snapchat
Telegram
Tiktok
X
Youtube
Twitch
Odysee
Minds
Substack
Bitchute
Bastyon

Playground

Variation

SizeDefaultMediumLargeExtra large

Copied!

<ul class="socialMedia">
<li><a href="https://x.com/_yannb_" aria-label="X"><svg>[…]</svg></a></li>
<li><a href="https://github.com/minimaldesign" aria-label="Github"><svg>[…]</svg></a></li>
<li><a href="https://www.youtube.com/@ProkoTV" aria-label="YouTube"><svg>[…]</svg></a></li>
</ul>

HTML

Available modifiers	Description
`.socialMedia`	Default - 24px
`.socialMedia` + `.socialMedia-md`	32px
`.socialMedia` + `.socialMedia-lg`	44px
`.socialMedia` + `.socialMedia-xl`	64px

When using the HTML component you’ll need to include the SVG icons “manually.” All the icons are available on Github. If you’d like to use different icons, Lucide is a great resource.

Astro component

The Astro component (Github) takes 3 props:

Prop	Type	Default	Description
`urls`	`array`	`[]`	An array of urls, or `{ url, label }` objects to override the accessible label (e.g. `"mCSS on GitHub"`).
`size`	`string`	undefined	`md`, `lg`, `xl`.
`newTab`	`boolean`	`true`	Open links in a new tab. Set to `false` to opt out.
`class`	`string`	undefined	Additional CSS classes, useful for helper classes.

Examples

---
import SocialMedia from "../../components/SocialMedia.astro";
---
<SocialMedia
  urls={[
    "https://www.instagram.com/amandaoleander/",
    "https://www.tiktok.com/@samdoesarts",
    "https://www.youtube.com/@ProkoTV",
  ]}
/>

---
import SocialMedia from "../../components/SocialMedia.astro";
---
<SocialMedia
  size="lg"
  urls={[
    "https://x.com/_yannb_",
    "https://github.com/minimaldesign",
    "https://www.youtube.com/@ProkoTV",
  ]}
/>

HTML examples

<ul class="socialMedia">
  <li>
    <a href="https://www.instagram.com/amandaoleander/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
     <svg>[…]</svg>
    </a>
  </li>
  <li>
    <a href="https://www.tiktok.com/@samdoesarts" target="_blank" rel="noopener noreferrer" aria-label="Tiktok">
     <svg>[…]</svg>
    </a>
  </li>
  <li>
    <a href="https://www.youtube.com/@ProkoTV" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
     <svg>[…]</svg>
    </a>
  </li>
</ul>