# Social links group

> A compact list of links to an organisation's own social profiles: optically balanced monochrome marks on even square targets, with optional names, handles and a heading. Ships no URLs of its own.

- ID: `cmp_footer_social_links_01`
- Slug: `footer-social-links-01`
- Version: `1.0.0` (current)
- Status: published
- Published: 2026-09-30T23:46:14Z
- Updated: 2026-09-30
- Available versions: `1.0.0`
- Kind: control
- Primary category: `footers`
- Detail page: https://pagesugar.com/components/footer-social-links-01?variant=inherit
- Preview: https://pagesugar.com/preview/footer-social-links-01

## Variants

| Variant | Label | Default | Artifact digest |
| --- | --- | --- | --- |
| `inherit` | Inherited colour | yes | `sha256-af8b0add5e578e6a56ad3676fc86d656b298c25deaaa3e53fcb185e1357436dc` |

## Runtime and compatibility

- Runtime: svelte
- Svelte: 5
- SvelteKit required: no (portable Svelte component)
- Tailwind CSS: 4
- SSR: supported
- Requires client-side JavaScript: no
- Integration level: presentational
- Appearance modes: light
- Suggested directory: `src/lib/components/footer-social-links-01`

## Dependencies

No third-party runtime packages.

## Services

No external services required.

## Usage

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.

Required props: `profiles`

```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" />
```

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.

## Usage guide

### Social links group

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>
```

#### In a footer

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](https://simpleicons.org) 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

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `profiles` | `SocialProfile[]` | yes |  | { 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 |  | Visible label above the list, which also names it. Omitted, the list is named by listLabel. |
| `headingLevel` | 2 \| 3 \| 4 \| 5 \| 6 | no |  | 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

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.

| Token | Public CSS variable |
| --- | --- |
| `accent` | `--footer-social-links-accent` |
| `ink` | `--footer-social-links-ink` |
| `muted` | `--footer-social-links-muted` |
| `subtle` | `--footer-social-links-subtle` |
| `hover` | `--footer-social-links-hover` |

## Accessibility

- 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.

## License

- Declared source: MIT
- Default license approval is pending. See https://pagesugar.com/docs/license.

## Source

- Palette: Inherited colour (`inherit`)
- Entry: `SocialLinks.svelte`
- Suggested directory: `src/lib/components/footer-social-links-01`
- Files: 2
- Artifact digest: `sha256-af8b0add5e578e6a56ad3676fc86d656b298c25deaaa3e53fcb185e1357436dc`

Paths below are relative to the suggested directory. Copy the files as they are;
they import nothing from this site.

#### `SocialLinks.svelte`

Role: entry · 6236 bytes · SHA-256 `cf5b6fa2a1f3493cd163c899390a697427a1b6299ed5495b389481c0e89d6d8f`

```svelte
<script lang="ts" module>
	import type { Snippet } from 'svelte';
	import type { Platform } from './icons';

	export type SocialPlatform = Platform;

	export interface SocialProfile {
		platform: Platform;
		/** Your real profile URL. The component ships none of its own. */
		href: string;
		/** Accessible name, naming you and the platform: "Halcyon on LinkedIn". */
		label: string;
		/** Account name shown after the platform name in the labelled displays. */
		handle?: string;
		/** Visible platform name, for another language or an `other` profile. */
		name?: string;
		/** Your own mark, drawn in currentColor. Replaces the built-in one. */
		icon?: Snippet;
	}
</script>

<script lang="ts">
	import { FALLBACK_MARK, MARKS, viewBoxFor } from './icons';

	interface Props {
		profiles: SocialProfile[];
		heading?: string;
		headingLevel?: 2 | 3 | 4 | 5 | 6;
		display?: 'icons' | 'icons-with-labels' | 'labels';
		size?: 'sm' | 'md';
		orientation?: 'horizontal' | 'vertical';
		openInNewTab?: boolean;
		rel?: string;
		listLabel?: string;
		newTabLabel?: string;
	}

	let {
		profiles,
		heading,
		headingLevel,
		display = 'icons',
		size = 'md',
		orientation = 'horizontal',
		openInNewTab = false,
		rel = 'me noopener',
		listLabel = 'Social media',
		newTabLabel = '(opens in new tab)'
	}: Props = $props();

	const uid = $props.id();

	/* A profile with no destination is dropped rather than rendered as a dead link. */
	const items = $derived(profiles.filter((profile) => profile.href?.trim()));
	const headingTag = $derived(headingLevel ? `h${headingLevel}` : 'p');
	const showIcon = $derived(display !== 'labels');
	const showText = $derived(display !== 'icons');

	const visibleName = (profile: SocialProfile) =>
		profile.name?.trim() ||
		(profile.platform === 'other' ? profile.label : MARKS[profile.platform].name);

	/*
	 * The label is read in place of the visible name only when it already contains it, so a
	 * voice command that speaks what is on screen always matches the link (WCAG 2.5.3).
	 */
	const nameInLabel = (profile: SocialProfile) =>
		profile.label.toLocaleLowerCase().includes(visibleName(profile).toLocaleLowerCase());

	/*
	 * Every link is a square target (icons) or a padded row (text) whose inset the list pulls
	 * back on both sides, so the first mark or word sits on the heading's edge, the last one
	 * ends flush when the group is aligned to the end, and the hover fill hangs into the gutter.
	 */
	const SIZES = {
		md: {
			list: '-mx-3',
			square: 'size-11 justify-center rounded-lg',
			row: 'min-h-11 min-w-11 gap-2 rounded-lg px-3 py-3 text-sm leading-5',
			glyph: 'size-5',
			glyphLine: 'h-5'
		},
		sm: {
			list: '-mx-2',
			square: 'size-8 justify-center rounded-md',
			row: 'min-h-8 min-w-8 gap-2 rounded-md px-2 py-2 text-xs leading-4',
			glyph: 'size-4',
			glyphLine: 'h-4'
		}
	} as const;

	const scale = $derived(SIZES[size]);

	const linkClass =
		'inline-flex max-w-full text-(--_muted) transition-[color,background-color,scale] duration-150 ease-[cubic-bezier(.2,0,0,1)] hover:bg-(--_hover) hover:text-(--_ink) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--_accent) active:scale-[.96] active:duration-[80ms] motion-reduce:active:scale-100';
</script>

{#snippet mark(profile: SocialProfile)}
	{#if profile.icon}
		<span class="block {scale.glyph} [&>svg]:size-full" aria-hidden="true">
			{@render profile.icon()}
		</span>
	{:else if profile.platform === 'other'}
		<svg
			class="block {scale.glyph}"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="1.75"
			stroke-linecap="round"
			stroke-linejoin="round"
			aria-hidden="true"
			focusable="false"><path d={FALLBACK_MARK} /></svg
		>
	{:else}
		{@const glyph = MARKS[profile.platform]}
		<svg
			class="block {scale.glyph}"
			viewBox={viewBoxFor(glyph.scale)}
			fill="currentColor"
			aria-hidden="true"
			focusable="false"><path d={glyph.path} /></svg
		>
	{/if}
{/snippet}

{#if items.length}
	<div class="footer-social-links" data-display={display} data-size={size}>
		{#if heading}
			<svelte:element
				this={headingTag}
				id="{uid}-heading"
				class="mb-2 text-sm leading-5 font-semibold text-balance text-(--_ink)"
			>
				{heading}
			</svelte:element>
		{/if}
		<ul
			role="list"
			class={[
				'm-0 flex list-none p-0',
				scale.list,
				orientation === 'vertical' ? 'flex-col items-start' : 'flex-wrap items-center gap-1'
			]}
			aria-labelledby={heading ? `${uid}-heading` : undefined}
			aria-label={heading ? undefined : listLabel}
		>
			{#each items as profile, index (index)}
				<li class="flex max-w-full min-w-0">
					<a
						href={profile.href}
						rel={rel || undefined}
						target={openInNewTab ? '_blank' : undefined}
						class={[linkClass, showText ? ['items-start', scale.row] : scale.square]}
					>
						{#if showIcon}
							<span class="flex shrink-0 items-center {showText ? scale.glyphLine : ''}"
								>{@render mark(profile)}</span
							>
						{/if}
						{#if showText}
							<span class="min-w-0 [overflow-wrap:anywhere]">
								<span class="sr-only">{profile.label}</span>
								<span class="font-medium" aria-hidden={nameInLabel(profile) ? 'true' : undefined}
									>{visibleName(profile)}</span
								>
								{#if profile.handle}
									<bdi class="font-normal text-(--_subtle)">{profile.handle}</bdi>
								{/if}
								{#if openInNewTab}<span class="sr-only">&nbsp;{newTabLabel}</span>{/if}
							</span>
						{:else}
							<span class="sr-only"
								>{profile.label}{#if openInNewTab}&nbsp;{newTabLabel}{/if}</span
							>
						{/if}
					</a>
				</li>
			{/each}
		</ul>
	</div>
{/if}

<style>
	/*
	 * Public tokens. Every colour defaults to the surrounding text colour, so the group takes the
	 * footer, author box or dark band it sits in without any change.
	 */
	.footer-social-links {
		--_accent: var(--footer-social-links-accent, currentColor);
		--_ink: var(--footer-social-links-ink, currentColor);
		--_muted: var(--footer-social-links-muted, currentColor);
		--_subtle: var(--footer-social-links-subtle, currentColor);
		--_hover: var(--footer-social-links-hover, color-mix(in srgb, currentColor 8%, transparent));
	}
</style>
```

#### `icons.ts`

Role: helper · 9850 bytes · SHA-256 `594adc25f0e212f7b353e5804bad9729f8c04fd4ef3161e00310acb0a7f97cd1`

```ts
/**
 * 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}`;
};
```

## Artifacts

### Inherited colour (`inherit`) (default)

- Artifact digest: `sha256-af8b0add5e578e6a56ad3676fc86d656b298c25deaaa3e53fcb185e1357436dc`
- Entry: `SocialLinks.svelte`
- Receipt: https://pagesugar.com/artifacts/cmp_footer_social_links_01/1.0.0/inherit/sha256-af8b0add5e578e6a56ad3676fc86d656b298c25deaaa3e53fcb185e1357436dc/manifest.json
- Bundle: https://pagesugar.com/artifacts/cmp_footer_social_links_01/1.0.0/inherit/sha256-af8b0add5e578e6a56ad3676fc86d656b298c25deaaa3e53fcb185e1357436dc/bundle.zip (10594 bytes, sha256 `c92c987893857b2eaa41e406629b6e425bd8a493e49ff07cc0dfa1ae26489d32`)

Files:

- `SocialLinks.svelte` (entry, 6236 bytes): https://pagesugar.com/artifacts/cmp_footer_social_links_01/1.0.0/inherit/sha256-af8b0add5e578e6a56ad3676fc86d656b298c25deaaa3e53fcb185e1357436dc/source/SocialLinks.svelte
- `icons.ts` (helper, 9850 bytes): https://pagesugar.com/artifacts/cmp_footer_social_links_01/1.0.0/inherit/sha256-af8b0add5e578e6a56ad3676fc86d656b298c25deaaa3e53fcb185e1357436dc/source/icons.ts