Skip to content
Components

SocialIcon

Draws a social network's mark in the surrounding text colour, on the same size scale as Icon. Without a label it is aria-hidden; with one it becomes an image with that accessible name.

Usage

import { SOCIAL_NETWORKS, SocialIcon, SocialIconProps, SocialNetwork } from "@instruments/materia-ui/components/social-icon";

Best practices

  • Set label only when the icon stands alone, such as inside an icon-only link; beside visible text leave it off so the mark is hidden from assistive tech.

  • The mark paints with currentColor, so colour it with a text-colour class on the icon or a parent (className="text-muted-foreground"), not a brand fill.

  • Size with the size token ("sm", "lg"…), not className="size-6"; it shares the Icon scale so a mark lines up with the icons around it.

Props

PropTypeDefaultDescription
network(required)"x" | "facebook" | "google" | "instagram" | "linkedin" | "pinterest" | "tiktok" | "whatsapp" | "youtube"

Which network's mark to draw.

sizeIconSize"base"

Same scale as Icon.

labelstring

Accessible name. Omit when the icon sits beside visible text; it is then hidden from assistive tech.

Also exports

  • constSOCIAL_NETWORKS
  • typeSocialIconProps
  • typeSocialNetwork

Composition

Builds on

Icon

Used by

SiteFooter