Social links

Social links live in siteConfig.social in src/config/site.ts. The footer, the contact section, and any “follow us” block all read from the same object.

The shape

social: {
  twitter:   "https://x.com/yourhandle",
  github:    "https://github.com/yourrepo",
  linkedin:  "https://linkedin.com/company/yourco",
  // instagram: null,
  // youtube:   null,
  // facebook:  null,
} as Record<string, string | null | undefined>,

Each key is the platform name, each value is the full URL to your profile or page.

Supported platforms

These are the keys the icon components in every theme already know how to render:

Key	Icon	Typical URL
`twitter`	X / Twitter logo	`https://x.com/yourhandle`
`github`	GitHub logo	`https://github.com/yourorg`
`linkedin`	LinkedIn logo	`https://linkedin.com/company/yourco`
`instagram`	Instagram glyph	`https://instagram.com/yourhandle`
`youtube`	YouTube logo	`https://youtube.com/@yourchannel`
`facebook`	Facebook logo	`https://facebook.com/yourpage`
`dribbble`	Dribbble dot	`https://dribbble.com/yourhandle`
`mastodon`	Mastodon logo	`https://hachyderm.io/@yourhandle`
`bluesky`	Bluesky butterfly	`https://bsky.app/profile/you.bsky.social`

Not every theme ships every icon — open src/components/Icon.astro (or your theme’s Footer.astro) to confirm. Adding a new icon is a 10-line change; see Add a custom icon below.

Hide a platform

Two ways, both work:

social: {
  twitter:  "https://x.com/yourhandle",
  github:   "https://github.com/yourrepo",
  linkedin: null,        // hidden — preferred
  // facebook,            // hidden — also fine
}

Components iterate Object.entries(social) and skip values that are null / undefined / empty string. Easier to scan a config that lists every supported platform with some set to null.

`social.json` (legacy)

Some themes also ship src/config/social.json:

{
  "twitter":  "https://x.com/yourhandle",
  "github":   "https://github.com/yourrepo",
  "linkedin": "https://linkedin.com/company/yourco"
}

Same shape as siteConfig.social. If your theme imports the JSON file (check src/components/Footer.astro), edit that. Otherwise edit site.ts.

Add a custom icon

If your platform isn’t in the list above:

Find a 24×24 SVG of the logo. The brand’s official press kit usually has one.

Open src/components/Icon.astro and add a new case to the switch (or to the icons object — depends on the theme):

{name === "discord" && (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M…"/>
  </svg>
)}

Add the new key to siteConfig.social:

social: {
  // …
  discord: "https://discord.gg/yourinvite",
}

The footer will pick it up on the next save.

What’s next

SEO & OG image — set the share-card image for those social links.
Customize → Brand colors & fonts — repaint the icons to your brand.