A footer that takes one line. From left to right it shows a small logo and business name, a copyright sentence, four text links and a group of round icon links, separated by thin dividers. It is about 90 pixels tall on a desktop. Under 768 pixels the four parts stack and centre, so nothing is squeezed. It has no state and no script, so it is plain markup.
const links = ["Wholesale", "Brew guides", "Privacy", "Contact"];
const socials = [
{
label: "Instagram",
icon: (
<>
<rect x="4" y="4" width="16" height="16" rx="4.5" stroke="currentColor" strokeWidth="1.7" />
<circle cx="12" cy="12" r="3.6" stroke="currentColor" strokeWidth="1.7" />
<circle cx="16.6" cy="7.4" r="1" fill="currentColor" />
</>
),
},
{
label: "YouTube",
icon: (
<>
<rect x="3" y="6" width="18" height="12" rx="3.5" stroke="currentColor" strokeWidth="1.7" />
<path d="M10.3 9.6v4.8l4.2-2.4-4.2-2.4Z" fill="currentColor" />
</>
),
},
{
label: "Podcast",
icon: (
<>
<rect x="9.2" y="3.5" width="5.6" height="10" rx="2.8" stroke="currentColor" strokeWidth="1.7" />
<path d="M6 11.5a6 6 0 0 0 12 0M12 17.5v3" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
</>
),
},
{
label: "Email us",
icon: (
<>
<rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke="currentColor" strokeWidth="1.7" />
<path d="m4.5 7.5 7.5 5.5 7.5-5.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
</>
),
},
];
export default function MinimalOneLineFooterWithSocialIcons() {
const focus = "focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-700 focus-visible:ring-offset-2";
return (
<footer className="border-t border-zinc-200 bg-white px-6 py-6 text-zinc-900">
<div className="mx-auto flex max-w-6xl flex-col items-center gap-x-8 gap-y-4 md:flex-row">
<a href="#" className={`flex items-center gap-2.5 rounded ${focus}`}>
<svg viewBox="0 0 24 24" aria-hidden="true" className="h-6 w-6">
<path d="M12 2.5c5 2.8 7.5 6.2 7.5 10a7.5 7.5 0 0 1-15 0c0-3.8 2.5-7.2 7.5-10Z" className="fill-rose-700" />
<path d="M12 8c-1.6 3.2 1.6 5 0 9" fill="none" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
</svg>
<span className="text-sm font-semibold tracking-tight">Saltmarsh Roasters</span>
</a>
<p className="text-sm text-zinc-600 md:flex md:h-10 md:items-center md:border-l md:border-zinc-200 md:pl-8">© 2026. Roasted in small batches in Whitby.</p>
<nav aria-label="Footer" className="md:ml-auto">
<ul className="flex flex-wrap items-center justify-center">
{links.map((l) => (
<li key={l}>
<a href="#" className={`inline-flex h-10 items-center rounded px-3 text-sm text-zinc-600 underline-offset-4 transition hover:text-zinc-900 hover:underline ${focus}`}>{l}</a>
</li>
))}
</ul>
</nav>
<ul className="flex items-center gap-1 md:border-l md:border-zinc-200 md:pl-6">
{socials.map((s) => (
<li key={s.label}>
<a href="#" aria-label={s.label} className={`inline-flex h-10 w-10 items-center justify-center rounded-full text-zinc-600 transition hover:bg-rose-50 hover:text-rose-700 ${focus}`}>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-5 w-5">{s.icon}</svg>
</a>
</li>
))}
</ul>
</div>
</footer>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/minimal-one-line-footer-with-social-icons.json
When the site has only a few pages and the header already links to them. The footer then only needs the copyright, legal links and a way to get in touch. Larger sites usually need link columns so people can find deeper pages.
Add an object to the `socials` array with a `label` and an `icon` made of SVG shapes that use `currentColor`. Keep the stroke width at 1.7 so the new icon matches the others.
It is a common choice for links that leave your site. If you do, add `target="_blank"` with `rel="noopener noreferrer"` and consider adding the words opens in a new tab to the `aria-label`.
No. In React, replace the year with `{new Date().getFullYear()}`. In a static site generator, use its date helper so the year is set at build time.
Yes. The component has no state, so the HTML version is complete and behaves the same.
Related: Footer with Four Link Columns and Newsletter Signup, Dark Footer with Large Call to Action, Navbar with Centered Links, CTA Button and Mobile Menu, Button Set: Primary, Secondary, Ghost, Icon and Loading.
More footers or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.