Social links group

Palette Inherited colour

Inherited colour palette · 10.3 KB ZIP File receipt View as Markdown View code

Preview

Width

Fit to the available width. The frame follows the height of its content; previews taller than the maximum auto-height scroll inside it.

Give this component to your coding agent Copy a prompt that fetches this exact version and palette through the PageSugar MCP server.

cmp_footer_social_links_01 · version 1.0.0 · Inherited colour palette

Using the PageSugar MCP server, fetch component cmp_footer_social_links_01 version 1.0.0 with variant "inherit", first inspect its requirements and license status and confirm this project uses Svelte 5 and Tailwind CSS 4. Retrieve every manifest file, including binary assets and any manifest-only response files, preserving relative paths. Then integrate the source and follow its usage notes. Run project checks, review the browser result and report anything unverified. Do not substitute another version or invent missing files.

Not connected yet? Set up the MCP server

Code

Palette: Inherited colour
Version: 1.0.0
Digest: Full digest

sha256-af8b0add5e578e6a56ad3676fc86d656b298c25deaaa3e53fcb185e1357436dc

Files (2)

This component needs all 2 files. Download the ZIP

icons.ts TypeScript · 9.6 KB Raw

/**
 * Platform marks for SocialLinks.svelte.
 *
 * Paths are from Simple Icons (https://simpleicons.org), dedicated to the public domain under
 * CC0 1.0: version 16.33.0, except LinkedIn, which Simple Icons dropped in 14.0.0 and is taken
 * from 13.0.0. Each is a single path on a 24 by 24 grid, filled with currentColor. The marks
 * remain trademarks of their owners; the licence covers the drawing, not the brand. Use them
 * only to link to your own profiles, in one colour, undistorted.
 *
 * `scale` balances the set optically. A solid square (LinkedIn, RSS) reads larger than a thin
 * cross (X) drawn on the same grid, so each mark is scaled inside its box by the factor that
 * brings the row close to one visual weight: filled marks shrink, open and thin marks fill the box. The feed and fallback marks are drawn for this component.
 */

export type Platform =
	| 'mastodon'
	| 'bluesky'
	| 'linkedin'
	| 'github'
	| 'youtube'
	| 'instagram'
	| 'facebook'
	| 'x'
	| 'threads'
	| 'tiktok'
	| 'rss'
	| 'other';

export interface PlatformMark {
	/** Visible name in the labelled displays, unless a profile passes its own. */
	name: string;
	path: string;
	/** Optical size inside the 24 px grid, 1 being edge to edge. */
	scale: number;
}

export const MARKS: Record<Exclude<Platform, 'other'>, PlatformMark> = {
	mastodon: {
		name: 'Mastodon',
		scale: 0.9,
		path: 'M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'
	},
	bluesky: {
		name: 'Bluesky',
		scale: 0.9,
		path: 'M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026'
	},
	linkedin: {
		name: 'LinkedIn',
		scale: 0.8,
		path: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'
	},
	github: {
		name: 'GitHub',
		scale: 0.98,
		path: 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'
	},
	youtube: {
		name: 'YouTube',
		scale: 0.88,
		path: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'
	},
	instagram: {
		name: 'Instagram',
		scale: 0.98,
		path: 'M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'
	},
	facebook: {
		name: 'Facebook',
		scale: 0.9,
		path: 'M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'
	},
	x: {
		name: 'X',
		scale: 1,
		path: 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
	},
	threads: {
		name: 'Threads',
		scale: 0.98,
		path: 'M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z'
	},
	tiktok: {
		name: 'TikTok',
		scale: 1,
		path: 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'
	},
	rss: {
		name: 'RSS',
		scale: 0.92,
		path: 'M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z'
	}
};

/** A globe, for an `other` profile with no icon of its own. Stroked, not filled. */
export const FALLBACK_MARK =
	'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM3.5 9h17M3.5 15h17M12 3c-2.2 2.4-3.3 5.4-3.3 9s1.1 6.6 3.3 9M12 3c2.2 2.4 3.3 5.4 3.3 9s-1.1 6.6-3.3 9';

/** A viewBox that centres a 24 px mark at `scale` of its box. */
export const viewBoxFor = (scale: number): string => {
	const pad = Math.round((12 / scale - 12) * 100) / 100;
	const size = Math.round((24 + pad * 2) * 100) / 100;
	return `${-pad} ${-pad} ${size} ${size}`;
};

/**
 * Platform marks for SocialLinks.svelte.
 *
 * Paths are from Simple Icons (https://simpleicons.org), dedicated to the public domain under
 * CC0 1.0: version 16.33.0, except LinkedIn, which Simple Icons dropped in 14.0.0 and is taken
 * from 13.0.0. Each is a single path on a 24 by 24 grid, filled with currentColor. The marks
 * remain trademarks of their owners; the licence covers the drawing, not the brand. Use them
 * only to link to your own profiles, in one colour, undistorted.
 *
 * `scale` balances the set optically. A solid square (LinkedIn, RSS) reads larger than a thin
 * cross (X) drawn on the same grid, so each mark is scaled inside its box by the factor that
 * brings the row close to one visual weight: filled marks shrink, open and thin marks fill the box. The feed and fallback marks are drawn for this component.
 */

export type Platform =
	| 'mastodon'
	| 'bluesky'
	| 'linkedin'
	| 'github'
	| 'youtube'
	| 'instagram'
	| 'facebook'
	| 'x'
	| 'threads'
	| 'tiktok'
	| 'rss'
	| 'other';

export interface PlatformMark {
	/** Visible name in the labelled displays, unless a profile passes its own. */
	name: string;
	path: string;
	/** Optical size inside the 24 px grid, 1 being edge to edge. */
	scale: number;
}

export const MARKS: Record<Exclude<Platform, 'other'>, PlatformMark> = {
	mastodon: {
		name: 'Mastodon',
		scale: 0.9,
		path: 'M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'
	},
	bluesky: {
		name: 'Bluesky',
		scale: 0.9,
		path: 'M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026'
	},
	linkedin: {
		name: 'LinkedIn',
		scale: 0.8,
		path: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'
	},
	github: {
		name: 'GitHub',
		scale: 0.98,
		path: 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'
	},
	youtube: {
		name: 'YouTube',
		scale: 0.88,
		path: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'
	},
	instagram: {
		name: 'Instagram',
		scale: 0.98,
		path: 'M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'
	},
	facebook: {
		name: 'Facebook',
		scale: 0.9,
		path: 'M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'
	},
	x: {
		name: 'X',
		scale: 1,
		path: 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
	},
	threads: {
		name: 'Threads',
		scale: 0.98,
		path: 'M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z'
	},
	tiktok: {
		name: 'TikTok',
		scale: 1,
		path: 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'
	},
	rss: {
		name: 'RSS',
		scale: 0.92,
		path: 'M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z'
	}
};

/** A globe, for an `other` profile with no icon of its own. Stroked, not filled. */
export const FALLBACK_MARK =
	'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM3.5 9h17M3.5 15h17M12 3c-2.2 2.4-3.3 5.4-3.3 9s1.1 6.6 3.3 9M12 3c2.2 2.4 3.3 5.4 3.3 9s-1.1 6.6-3.3 9';

/** A viewBox that centres a 24 px mark at `scale` of its box. */
export const viewBoxFor = (scale: number): string => {
	const pad = Math.round((12 / scale - 12) * 100) / 100;
	const size = Math.round((24 + pad * 2) * 100) / 100;
	return `${-pad} ${-pad} ${size} ${size}`;
};

Usage#

On this page

Presentational only: renders the profiles you pass, in the order you pass them. It has no default or example URLs, does not check that a profile exists, fetch follower counts, embed feeds or offer share-this-page buttons, and does not offer brand colours. No runtime packages beyond Svelte and Tailwind CSS.

Suggested location: src/lib/components/footer-social-links-01
Required props: profiles

Limitations

Profiles with a blank href are skipped; with none left, nothing renders.
The built-in marks are trademarks of their owners. Use them in one colour to link to your own profiles; the component offers no brand-colour option.
The LinkedIn mark comes from Simple Icons 13.0.0, the last release that carried it.
Visible platform names are English; pass name on each profile to translate them.
Light appearance by default. It inherits the surrounding text colour, so it works on dark surfaces without a dark mode being declared.

Example

Svelte
<script lang="ts">
	import SocialLinks, {
		type SocialProfile
	} from '$lib/components/footer-social-links-01/SocialLinks.svelte';

	const profiles: SocialProfile[] = [
		{ platform: 'mastodon', href: 'https://mastodon.example/@yourname', label: 'Example Co on Mastodon' },
		{ platform: 'linkedin', href: 'https://linkedin.example/company/yourname', label: 'Example Co on LinkedIn' },
		{ platform: 'github', href: 'https://github.example/yourname', label: 'Example Co on GitHub' }
	];
</script>

<SocialLinks {profiles} heading="Follow us" />

Pass your real profiles. The component has no default URLs; the examples here and in the preview use reserved .example domains, so replace every href with your own account.

Svelte
<script lang="ts">
	import SocialLinks, {
		type SocialProfile
	} from '$lib/components/footer-social-links-01/SocialLinks.svelte';

	const profiles: SocialProfile[] = [
		{
			platform: 'mastodon',
			href: 'https://mastodon.example/@yourname',
			label: 'Example Co on Mastodon',
			handle: '@yourname@mastodon.example'
		},
		{
			platform: 'linkedin',
			href: 'https://linkedin.example/company/yourname',
			label: 'Example Co on LinkedIn'
		},
		{
			platform: 'github',
			href: 'https://github.example/yourname',
			label: 'Example Co on GitHub',
			handle: 'yourname'
		}
	];
</script>

<div
	class="text-zinc-600 [--footer-social-links-ink:#09090b] [--footer-social-links-subtle:#71717a]"
>
	<SocialLinks {profiles} heading="Follow us" />
</div>

Footers take the group through a snippet rather than importing it. With footer-multi-column-01:

Svelte
{#snippet social()}
	<SocialLinks {profiles} heading="Follow us" headingLevel={3} size="sm" />
{/snippet}

<FooterMultiColumn {brand} {columns} {copyright} {social} />

Colour#

Everything defaults to currentColor, so the group takes the text colour of whatever it sits in. The recommended light setup is a zinc-600 container with ink at #09090b and subtle at #71717a. On a zinc-950 band, use text-zinc-400 with ink at #fafafa and subtle at #a1a1aa. The hover fill is 8% of the link colour; set --footer-social-links-hover: transparent for a tone-only hover.

Your own mark#

Use platform: 'other' and pass icon, a snippet that draws an SVG in currentColor on a 24 px grid. It is sized for you and wrapped in an aria-hidden span; give the SVG aria-hidden="true" and focusable="false" too, and nothing inside it that takes focus. Without icon, an other profile shows a globe. Set name for the visible text, and write a label that contains it ("Example Co forum" for a visible "Forum"), so a voice command that says what is on screen matches the link. When the label does not contain the name, the name is read after it.

Trademarks#

The built-in marks come from Simple Icons under CC0. That covers the drawing, not the brand: each mark is a trademark of its owner. Use them to link to your own profiles, in one colour and at their shipped proportions. LinkedIn asked Simple Icons to remove its mark in 14.0.0; the path here is from 13.0.0. Replace it with the mark from LinkedIn's own brand kit if you prefer.

Mastodon verification#

rel defaults to me noopener. Keep me, then add your site's URL to your Mastodon profile's metadata; Mastodon checks that the page links back with rel="me" and shows a verified tick.

Props and content inputs#

On this page

Name	Type	Required	Default	Description
`profiles`	`SocialProfile[]`	Yes	None	{ platform, href, label, handle?, name?, icon? }[]; platform is one of the eleven built-in marks or 'other'. label is the accessible name ("Example Co on LinkedIn"), handle follows the name in the labelled displays, name replaces the visible platform name, icon is a snippet drawing your own mark in `currentColor`. No defaults.
`heading`	`string`	No	None	Visible label above the list, which also names it. Omitted, the list is named by `listLabel`.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	No	None	Renders the heading as h2 to h6. Omitted, it is a paragraph.
`display`	`'icons' \| 'icons-with-labels' \| 'labels'`	No	`'icons'`	Marks only, marks with the platform name and handle, or names only.
`size`	`'sm' \| 'md'`	No	`'md'`	`md: 20` px marks on 44 px targets, 14 px text. `sm: 16` px marks on 32 px targets, 12 px text.
`orientation`	`'horizontal' \| 'vertical'`	No	`'horizontal'`	A wrapping row, or a column of rows.
`openInNewTab`	`boolean`	No	`false`	Opens each profile in a new tab and appends `newTabLabel` to each link's name.
`rel`	`string`	No	`'me noopener'`	rel on every link. 'me' lets Mastodon and similar services verify the profile links back to your site.
`listLabel`	`string`	No	`'Social media'`	Accessible name of the list when there is no heading.
`newTabLabel`	`string`	No	`'(opens in new tab)'`	Visually hidden text after each name when `openInNewTab` is set; translate it with the page.

Customization#

On this page

Change content through props. Every colour defaults to the surrounding text colour; five --footer-social-links-* variables (accent, ink, muted, subtle, hover) retone the focus ring, hover, rest, handle and hover fill. Edit the SIZES map for other sizes.

Colour: put the group inside your footer's text colour (for example text-zinc-600 on white) and the marks, names and focus ring follow. Set --footer-social-links-ink to your strongest text colour so the heading and hovered links step up to it.
Handles: set --footer-social-links-subtle to your tertiary text colour (#71717a on white) so handles sit a step below the names; keep it at 4.5:1.
Dark or tinted page: nothing to change if the container sets its own text colour. On a zinc-950 band use text-zinc-400 with ink #fafafa and subtle #a1a1aa.
Hover fill: --footer-social-links-hover defaults to 8% of the link colour; set transparent for a tone-only hover.
Focus: --footer-social-links-accent colours the focus ring; keep it at 3:1 against the surface.
Marks: icons.ts holds each path and its optical scale. Add a platform by adding an entry and its name to the Platform type, or pass icon on an 'other' profile.
Sizes: the SIZES map at the top of the script holds each size's target, padding, glyph and text classes as complete Tailwind strings.
Mastodon verification: keep 'me' in rel, and add your site's URL to the profile's metadata on the Mastodon side.

Public CSS variables

Variable	Token
`--footer-social-links-accent`	accent
`--footer-social-links-ink`	ink
`--footer-social-links-muted`	muted
`--footer-social-links-subtle`	subtle
`--footer-social-links-hover`	hover

Accessibility#

On this page

A ul with role="list" (so Safari keeps list semantics without markers), named by the heading through aria-labelledby, or by listLabel ("Social media") when there is no heading.
Each link's accessible name is its label, such as "Halcyon on LinkedIn". In the labelled displays the visible platform name is hidden from assistive technology only when the label already contains it; otherwise it is read after the label, so the name always contains what is on screen (WCAG 2.5.3). Handles follow in a bdi element so they keep their own direction.
Marks are aria-hidden with focusable="false"; a custom icon snippet is wrapped in an aria-hidden span, and its SVG should carry aria-hidden="true" and focusable="false" as well.
No title tooltips: the name is in the markup, not on hover.
md targets are at least 44 by 44 px; sm targets are at least 32 px, above the 24 px WCAG 2.2 minimum, for dense small-print rows.
Focus shows a two-pixel outline in the accent, offset by two pixels, following the target's radius, on :focus-visible only.
With openInNewTab, each link opens a new tab and its name ends with newTabLabel.
Logical properties only; the list mirrors under dir="rtl" and the marks keep their shapes.
Server-rendered with no client JavaScript; ids come from $props.id().

Known limitations

The label is yours to write: include your organisation and the platform, and translate it with the page.
When the group inherits a pale text colour, check the marks at 3:1 and the names at 4.5:1 against the surface.

Release details#

On this page

Integration: Presentational

Works without client-side JavaScript

Server-side rendering supported
Dependencies: No additional runtime packages beyond Svelte and Tailwind CSS
License: MIT. Default license approval is pending; see the license status before adopting the source.
Version history: 1.0.0 (Published) Current release · 30 September 2026

Only the current release is available. Keep downloaded source and its receipt if you need to use it again later.

Preview

Code

Usage#

Limitations

Example