A footer with social icons built using pure HTML and CSS that presents recognizable social platform links in a compact, visually balanced layout, allowing users to connect with a brand or creator without relying on JavaScript or external libraries.
Usage
This component is ideal for websites where social presence supports trust or engagement, such as portfolios, blogs, startups, open source projects, or brand sites that want to encourage follows without dominating the page.
Implementation
The social footer is implemented using inline icon elements, CSS hover states, and spacing alignment, ensuring icons remain accessible, responsive, and visually consistent across different screen sizes.
HTML
<footer class="ss-footer">
<p>Follow us</p>
<div class="socials">
<!-- Website -->
<a href="#" aria-label="Website">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M2 12h20M12 2c3 4 3 14 0 20M12 2c-3 4-3 14 0 20" stroke="currentColor" stroke-width="2"/>
</svg>
</a>
<!-- Facebook -->
<a href="#" aria-label="Facebook">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M22 12a10 10 0 1 0-11.5 9.9v-7H8v-3h2.5V9.5A3.5 3.5 0 0 1 14.2 6h2.8v3h-2c-.7 0-1 .4-1 1v2h3l-.5 3h-2.5v7A10 10 0 0 0 22 12Z"/>
</svg>
</a>
<!-- Instagram -->
<a href="#" aria-label="Instagram">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" stroke-width="2"/>
<circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="2"/>
<circle cx="17.5" cy="6.5" r="1.5" fill="currentColor"/>
</svg>
</a>
</div>
</footer>CSS
.ss-footer{
max-width:420px;
margin:auto;
padding:24px 16px;
text-align:center;
border-radius:14px;
background:var(--footer-bg);
color:var(--footer-text);
}
.ss-footer p{
font-size:14px;
margin-bottom:12px;
color:var(--footer-muted);
}
.socials{
display:flex;
justify-content:center;
gap:14px;
}
.socials a{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:var(--icon-color);
background:var(--icon-bg);
transition:.2s ease;
}
.socials a:hover{
color:var(--icon-hover);
background:var(--icon-bg-hover);
}
:root{
--footer-bg:#f8fafc;
--footer-text:#0f172a;
--footer-muted:#64748b;
--icon-color:#475569;
--icon-bg:#e5e7eb;
--icon-hover:#2563eb;
--icon-bg-hover:#dbeafe;
}
@media (prefers-color-scheme: dark){
:root{
--footer-bg:#0f172a;
--footer-text:#e5e7eb;
--footer-muted:#94a3b8;
--icon-color:#cbd5f5;
--icon-bg:#1f2937;
--icon-hover:#60a5fa;
--icon-bg-hover:#1e293b;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses recognizable social platform icons
- Provides quick external connection points
- Includes subtle hover feedback
- Designed for compact, modern footers
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.