Components :: Social Media Links

Specs

File Name	class	Source
`component.socialMedia.css`	`.socialMedia`	Github

The socialMedia component consists of an unordered list of links to social media accounts and their corresponding icons. The following 4 sizes and 19 icons (18 social media platforms + 1 generic link icon) are available out of the box.

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

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

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.

The Astro component (Github) takes 3 props:

urls: an array of social media urls
size (optional) string: md, lg, xl
extraClass: (optional) additional css, useful for helper classes.

Examples

Astro component syntax:

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

HTML component syntax:

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

Astro component syntax:

<SocialMedia
  size="xl"
  urls={[
    "https://x.com/_yannb_",
    "https://github.com/minimaldesign",
    "https://www.youtube.com/@ProkoTV",
  ]}
/>

HTML component syntax:

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