buttoniconbeginner
Icon Button
A compact square button with an icon, perfect for toolbars and action bars.
Preview
<button class="w-12 h-12 flex items-center justify-center bg-slate-100 text-slate-600 rounded-xl hover:bg-blue-500 hover:text-white transition-colors duration-200" aria-label="Settings">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
</button>Color Breakdown
Background
bg-slate-100
#f1f5f9
Icon Color
text-slate-600
#475569
Hover Background
hover:bg-blue-500
#3b82f6
Hover Icon
hover:text-white
#ffffff
Dark Mode Variant
Add these Tailwind classes for a dark mode adaptation of this recipe.
dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-blue-600Use Cases
ToolbarsSettings togglesSocial media icon buttons
Browser Support
All modern browsers.
Related Recipes
Build Your Own Color Recipe
Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.
Explore ToolsFrequently Asked Questions
How do I make the icon button circular?▼
Replace rounded-xl with rounded-full.
Can I use emoji instead of SVG?▼
Yes, replace the SVG with any emoji or icon font character.