SocialIcon

Bring your own icon to this social icon.

Props

A SocialIcon component have the following properties:

Prop	Required	Description
`ariaLabel`	yes	The aria label for the social icon.
`class`	no	Tailwind CSS classes to apply to the icon.
`decorator`	no	Set to `mastodon` to set `rel="me"`.
`href`	yes	The social link.
`variant`	no	Visual style: `tonal` (default), `filled`, or `outlined`.

Note that the social link is marked as an external link and triggers a full page reload.

Snippets

Snippet	Description
`children`	Snippet to render a social icon.

Example

<script lang="ts">
	import { SocialIcon } from '$lib/components/index.js';
	import { siBluesky, siGithub, siMastodon, siRss } from 'simple-icons';
</script>

<div class="flex gap-5">
	<SocialIcon
		ariaLabel="Subscribe to my RSS feed"
		href="https://www.maier.tech/rss.xml"
		class="preset-filled-secondary-500"
	>
		<svg class="block size-8" viewBox="0 0 24 24" fill="currentColor" role="img">
			<path d={siRss.path} />
			<title>{siRss.title}</title>
		</svg>
	</SocialIcon>

	<SocialIcon
		ariaLabel="Follow me on Bluesky"
		href="https://bsky.app/profile/maier.tech"
		class="preset-filled-primary-500"
	>
		<svg class="block size-8" viewBox="0 0 24 24" fill="currentColor" role="img">
			<path d={siBluesky.path} />
			<title>{siBluesky.title}</title>
		</svg>
	</SocialIcon>

	<SocialIcon
		ariaLabel="Go to my GitHub profile"
		href="https://github.com/maiertech"
		class="preset-filled-primary-900-100"
	>
		<svg class="block size-8" viewBox="0 0 24 24" fill="currentColor" role="img">
			<path d={siGithub.path} />
			<title>{siGithub.title}</title>
		</svg>
	</SocialIcon>

	<SocialIcon
		ariaLabel="Go to my Mastodon profile"
		href="https://maier.social/@thilo"
		decorator="mastodon"
		class="preset-filled-primary-800-200"
	>
		<svg class="block size-8" viewBox="0 0 24 24" fill="currentColor" role="img">
			<path d={siMastodon.path} />
			<title>{siMastodon.title}</title>
		</svg>
	</SocialIcon>
</div>