social follow buttons icons twitter instagram youtube linkedin tiktok github social follow buttons twitter instagram youtube linkedin tiktok github icons social media follow buttons with follower count branded social links row icon-only social buttons
Social Follow Buttons
Fetch pattern JSON:
curl https://webspire.de/patterns/social-proof/follow-buttons.json follow-buttons.html
<section class="ws-social-proof ws-social-follow-buttons" style="background-color: var(--ws-color-bg);">
<div class="mx-auto max-w-4xl px-6 py-16">
<!-- Section header -->
<div class="mb-10 text-center">
<h2 class="text-2xl font-bold tracking-tight" style="color: var(--ws-color-text);">Follow us</h2>
<p class="mt-2 text-base" style="color: var(--ws-color-text-soft);">Stay up to date with the latest patterns, tutorials, and releases.</p>
</div>
<!-- Full follow buttons -->
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter / X -->
<a
href="#"
class="group inline-flex items-center gap-3 rounded-xl border px-5 py-3 text-sm font-medium transition-all duration-200"
style="border-color: var(--ws-color-border); color: var(--ws-color-text); background-color: var(--ws-color-surface);"
aria-label="Follow on X (Twitter)"
>
<svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
<span>X (Twitter)</span>
<span class="text-xs" style="color: var(--ws-color-text-soft);">24.5K followers</span>
</a>
<!-- Instagram -->
<a
href="#"
class="group inline-flex items-center gap-3 rounded-xl border px-5 py-3 text-sm font-medium transition-all duration-200"
style="border-color: var(--ws-color-border); color: var(--ws-color-text); background-color: var(--ws-color-surface);"
aria-label="Follow on Instagram"
>
<svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect width="18" height="18" x="3" y="3" rx="5" ry="5"/><circle cx="12" cy="12" r="3.5"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
<span>Instagram</span>
<span class="text-xs" style="color: var(--ws-color-text-soft);">18.2K followers</span>
</a>
<!-- YouTube -->
<a
href="#"
class="group inline-flex items-center gap-3 rounded-xl border px-5 py-3 text-sm font-medium transition-all duration-200"
style="border-color: var(--ws-color-border); color: var(--ws-color-text); background-color: var(--ws-color-surface);"
aria-label="Subscribe on YouTube"
>
<svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
<span>YouTube</span>
<span class="text-xs" style="color: var(--ws-color-text-soft);">9.8K subscribers</span>
</a>
<!-- LinkedIn -->
<a
href="#"
class="group inline-flex items-center gap-3 rounded-xl border px-5 py-3 text-sm font-medium transition-all duration-200"
style="border-color: var(--ws-color-border); color: var(--ws-color-text); background-color: var(--ws-color-surface);"
aria-label="Follow on LinkedIn"
>
<svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="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.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 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"/></svg>
<span>LinkedIn</span>
<span class="text-xs" style="color: var(--ws-color-text-soft);">12.1K followers</span>
</a>
<!-- TikTok -->
<a
href="#"
class="group inline-flex items-center gap-3 rounded-xl border px-5 py-3 text-sm font-medium transition-all duration-200"
style="border-color: var(--ws-color-border); color: var(--ws-color-text); background-color: var(--ws-color-surface);"
aria-label="Follow on TikTok"
>
<svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V9.87a8.23 8.23 0 004.84 1.56V8a4.85 4.85 0 01-1.07-.31z"/></svg>
<span>TikTok</span>
<span class="text-xs" style="color: var(--ws-color-text-soft);">31.7K followers</span>
</a>
<!-- GitHub -->
<a
href="#"
class="group inline-flex items-center gap-3 rounded-xl border px-5 py-3 text-sm font-medium transition-all duration-200"
style="border-color: var(--ws-color-border); color: var(--ws-color-text); background-color: var(--ws-color-surface);"
aria-label="Star on GitHub"
>
<svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="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"/></svg>
<span>GitHub</span>
<span class="text-xs" style="color: var(--ws-color-text-soft);">4.3K stars</span>
</a>
</div>
<!-- Divider -->
<div class="my-10 flex items-center gap-4">
<div class="h-px flex-1" style="background-color: var(--ws-color-border);"></div>
<span class="text-xs font-medium" style="color: var(--ws-color-text-soft);">Compact variant</span>
<div class="h-px flex-1" style="background-color: var(--ws-color-border);"></div>
</div>
<!-- Compact icon-only variant -->
<div class="flex flex-wrap justify-center gap-3">
<!-- X -->
<a href="#" class="flex h-11 w-11 items-center justify-center rounded-full border transition hover:opacity-70" style="border-color: var(--ws-color-border); color: var(--ws-color-text); background-color: var(--ws-color-surface);" aria-label="Follow on X (Twitter)">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<!-- Instagram -->
<a href="#" class="flex h-11 w-11 items-center justify-center rounded-full border transition hover:opacity-70" style="border-color: var(--ws-color-border); color: var(--ws-color-text); background-color: var(--ws-color-surface);" aria-label="Follow on Instagram">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect width="18" height="18" x="3" y="3" rx="5" ry="5"/><circle cx="12" cy="12" r="3.5"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
</a>
<!-- YouTube -->
<a href="#" class="flex h-11 w-11 items-center justify-center rounded-full border transition hover:opacity-70" style="border-color: var(--ws-color-border); color: var(--ws-color-text); background-color: var(--ws-color-surface);" aria-label="Subscribe on YouTube">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
</a>
<!-- LinkedIn -->
<a href="#" class="flex h-11 w-11 items-center justify-center rounded-full border transition hover:opacity-70" style="border-color: var(--ws-color-border); color: var(--ws-color-text); background-color: var(--ws-color-surface);" aria-label="Follow on LinkedIn">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="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.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 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"/></svg>
</a>
<!-- TikTok -->
<a href="#" class="flex h-11 w-11 items-center justify-center rounded-full border transition hover:opacity-70" style="border-color: var(--ws-color-border); color: var(--ws-color-text); background-color: var(--ws-color-surface);" aria-label="Follow on TikTok">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V9.87a8.23 8.23 0 004.84 1.56V8a4.85 4.85 0 01-1.07-.31z"/></svg>
</a>
<!-- GitHub -->
<a href="#" class="flex h-11 w-11 items-center justify-center rounded-full border transition hover:opacity-70" style="border-color: var(--ws-color-border); color: var(--ws-color-text); background-color: var(--ws-color-surface);" aria-label="Star on GitHub">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="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"/></svg>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
socialfollowbuttonsiconstwitterinstagramyoutubelinkedintiktokgithub
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section heading and subtitle. |
| buttons | Yes | Row of follow buttons — full or compact variant. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'full' | 'compact' | full | Full buttons with name and count, or compact icon-only circles. |
| platforms | string[] | [twitter, instagram, youtube, linkedin, tiktok, github] | Which platforms to show. |
Two variants in one: a full labelled button row for prominent placement, and a compact icon-only ring for footers and sidebars. Both use consistent token colors — add platform-specific hover color overrides per your brand guidelines.