Icon Button
A free, accessible icon button for React and Tailwind CSS with hover, ripple and loading states. Ideal for toolbars and compact actions — copy-paste and ship.
Copy the code
export function IconButton({ children }: { children: React.ReactNode }) {
return (
<button className="grid h-11 w-11 place-items-center rounded-xl border
border-white/15 bg-white/5 text-white transition
hover:bg-white/10 active:scale-95">
{children}
</button>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the icon button
This icon button is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.