Social Icons
AI Pass+social#icons
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Social component
About Social Icons
Circle social icon buttons with outline ring and brand color hover fill — each icon sits inside a circular button with a subtle border ring that expands on hover while the background fills with the platform's brand color, fully token-driven and design-system agnostic.
Features
- Five circle icon buttons for Instagram, X, YouTube, LinkedIn, and GitHub using Tabler Icons (inline SVGs, 24x24, stroke-width 2)
- Each button has a circular outline ring that expands outward on hover via outline-offset
- Brand-specific hover fills: Instagram gradient, X dark/light fill, YouTube red, LinkedIn blue, GitHub dark
- Icons scale up on hover for tactile feedback
- Dark-mode brand color variants that cross-fade smoothly when
body.darkis applied - All colors driven by CSS custom properties for easy theming
- Design-system switcher for live re-theming across multiple brand palettes
Accessibility
- ARIA labels
- All icon links have an
aria-labelthat names the platform and announces the new-tab context - Landmark
- The icon row is a
<nav>labelled "Social media links" - Social links
- Real
<a>withtarget="_blank"andrel="noopener noreferrer" - Focus indicators
.sic-btn:focus-visiblere-colors the resting outline to--ringat--sic-ring-offset- Reduced motion
prefers-reduced-motion: reducedisables all animations- Viewport
100dvhfor mobile-safe viewport height
Customise it with AI
Open Social Icons in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the social is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Social Flip
VanillaReact
Square social icon buttons with a 3D flip animation on hover — each icon sits in a rounded-square button that inverts its background and rotates the icon 360 degrees via a rotateY transform, fully token-driven and design-system agnostic.
#social#icons#flip
Radial Share
ReactVanilla
A radial share speed-dial — a central share FAB fans four social spokes (Instagram, LinkedIn, Threads, YouTube) out along a springy clockwise arc, framed by a connecting accent ring and soft halo, closes on Escape or outside click, fully token-driven and design-system agnostic.
#social#radial
Social Tooltip
VanillaReact
Circle social icon buttons with floating tooltip popups on hover and brand color fill — five platform icons (Facebook, GitHub, Instagram, LinkedIn, X) in neutral circles with shadow, each revealing a brand-matched tooltip with bounce easing on hover.
#social#tooltip
Modal — Aperture
VanillaReact
An accessible observatory-style dialog that opens through an animated circular aperture, with keyboard support and light and dark themes.
#modal#dialog#animation
Glow Footer
VanillaReact
A glowing page footer — newsletter CTA with inline validation, gradient Atheros logo, async-fetched nav columns behind a skeleton shimmer, Tabler social row, and a stateful mono live-status capsule (`setSystemStatus()`). Light and dark themes, both carrying the accent gradient.
#footer#newsletter#navigation
Profile Dropdown Menu
ReactVanilla
A profile dropdown led by an identity header for the signed-in account, with quick actions and soft key-chip shortcut hints, a What's new discovery item, a switch-account list of the other accounts with a hover switch arrow, a dark mode toggle row grouped above the error-weighted sign-out action — fully token-driven and design-system agnostic.
#account-switcher#dark-mode#responsive
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
