Social Links

Icon links to social media profiles.

html

<ul class="social social--horizontal social--filled">
  <li><a href="#" aria-label="Twitter" style="width:38px;height:38px;--accent:#241430;">&#120143;</a></li>
  <li><a href="#" aria-label="Instagram" style="width:38px;height:38px;--accent:#241430;">&#9679;</a></li>
  <li><a href="#" aria-label="LinkedIn" style="width:38px;height:38px;--accent:#241430;">in</a></li>
</ul>
<style>
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; font: 16px system-ui, sans-serif; }
.social--vertical { flex-direction: column; }
.social a { display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; font-weight: 700; }
.social--filled a { background: var(--accent); color: #FAF7F2; }
.social--outline a { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.social a:hover, .social a:focus-visible { opacity: .85; }
</style>

tailwind

<ul class="social-tw social-tw--horizontal social-tw--filled list-none m-0 p-0 flex gap-2.5 font-sans">
  <li><a href="#" aria-label="Twitter" class="flex items-center justify-center rounded-full no-underline font-bold hover:opacity-85" style="width:38px;height:38px;--accent:#241430;">&#120143;</a></li>
  <li><a href="#" aria-label="Instagram" class="flex items-center justify-center rounded-full no-underline font-bold hover:opacity-85" style="width:38px;height:38px;--accent:#241430;">&#9679;</a></li>
  <li><a href="#" aria-label="LinkedIn" class="flex items-center justify-center rounded-full no-underline font-bold hover:opacity-85" style="width:38px;height:38px;--accent:#241430;">in</a></li>
</ul>
<style>
.social-tw--vertical { flex-direction: column; }
.social-tw--filled a { background: var(--accent); color: #FAF7F2; }
.social-tw--outline a { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
</style>

react

export function SocialLinks({
  layout = "horizontal",
  iconStyle = "filled",
  accent = "#241430",
  size = 38,
}) {
  const filled = iconStyle === "filled";
  const links = [
    { label: "Twitter", glyph: "\ud835\udd4f" },
    { label: "Instagram", glyph: "\u25cf" },
    { label: "LinkedIn", glyph: "in" },
  ];
  return (
    <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", gap: 10, font: "16px system-ui, sans-serif",
      flexDirection: layout === "vertical" ? "column" : "row" }}>
      {links.map((link) => (
        <li key={link.label}>
          <a href="#" aria-label={link.label} style={{ display: "flex", alignItems: "center", justifyContent: "center",
            width: size, height: size, borderRadius: "50%", textDecoration: "none", fontWeight: 700,
            background: filled ? accent : "transparent", color: filled ? "#FAF7F2" : accent,
            border: filled ? "none" : `1.5px solid ${accent}` }}>{link.glyph}</a>
        </li>
      ))}
    </ul>
  );
}