Tailwind CSS Icon Button

Get started easily with our Icon Button component based on HTML and styled with Tailwind CSS.

These types of buttons provide a visually intuitive way to interact with an application or website. The use of icons can help save space on the user interface and make it easier for users to recognize and understand the action associated with the button. Think about the trash bin icon for deleting items, a pencil icon for editing content, or a magnifying glass icon for search action.

Below we showcased examples of icon buttons that you can use for you Material Tailwind project.

Icon Button Examples:

Default Icon Button

Here's how to implement a simple and responsive icon button component. It can be used for the action of favoriting or liking content, given its heart icon.

<button
  class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
  type="button">
  <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i class="fas fa-heart"
      aria-hidden="true"></i></span>
</button>

Icon Button Variants

Check out how to implement different visual styles and interaction states for your icon button using a combination of utility classes.

<div class="flex gap-4">
  <button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
    type="button">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i class="fas fa-heart"
        aria-hidden="true"></i></span></button><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs bg-gradient-to-tr from-gray-900 to-gray-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85]"
    type="button">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i class="fas fa-heart"
        aria-hidden="true"></i></span></button><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs border border-gray-900 text-gray-900 hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85]"
    type="button">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i class="fas fa-heart"
        aria-hidden="true"></i></span></button><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs text-gray-900 hover:bg-gray-900/10 active:bg-gray-900/20"
    type="button">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i class="fas fa-heart"
        aria-hidden="true"></i></span>
  </button>
</div>

In the coded snipped you can see:

• The first button: has a solid gray background (bg-gray-900), white text, and standard shadow effects. It showcases interactive states like hover, focus, and active, with visual feedback including shadow and opacity changes.
• The second button: introduces a gradient background (bg-gradient-to-tr from-gray-900 to-gray-800) while maintaining similar size, shape, and interaction states as the first button.
• The third button: features a border (border border-gray-900) and changes the text color to gray (text-gray-900), distinguishing it from the previous buttons with a more subtle appearance.
• The fourth button: has a transparent background initially with text colored in gray (text-gray-900). The hover and active states introduce a background color change (hover:bg-gray-900/10 active:bg-gray-900/20), making the button's response to user interactions more understated compared to the others.

Icon Button Sizes

Use this example to create icon buttons in different sizes.

 <div class="flex items-end gap-4">
  <button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
    type="button">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i class="fas fa-heart"
        aria-hidden="true"></i></span></button><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
    type="button">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i class="fas fa-heart"
        aria-hidden="true"></i></span></button><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-12 max-w-[48px] h-12 max-h-[48px] rounded-lg text-sm bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
    type="button">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i class="fas fa-heart fa-lg"
        aria-hidden="true"></i></span>
  </button>
</div>

Icon Button Colors

Use this example to create icon buttons with different colors (blue, red, green, and amber) for your Tailwind CSS project.

 <div class="flex gap-4">
  <button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs bg-blue-500 text-white shadow-md shadow-blue-500/20 hover:shadow-lg hover:shadow-blue-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
    type="button"
  >
    <span
      class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
      ><i class="fas fa-heart" aria-hidden="true"></i
    ></span></button
  ><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs bg-red-500 text-white shadow-md shadow-red-500/20 hover:shadow-lg hover:shadow-red-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
    type="button"
  >
    <span
      class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
      ><i class="fas fa-heart" aria-hidden="true"></i
    ></span></button
  ><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs bg-green-500 text-white shadow-md shadow-green-500/20 hover:shadow-lg hover:shadow-green-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
    type="button"
  >
    <span
      class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
      ><i class="fas fa-heart" aria-hidden="true"></i
    ></span></button
  ><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] rounded-lg text-xs bg-amber-500 text-black shadow-md shadow-amber-500/20 hover:shadow-lg hover:shadow-amber-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
    type="button"
  >
    <span
      class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
      ><i class="fas fa-heart" aria-hidden="true"></i
    ></span>
  </button>
</div>

Icon Button Rounded

Use this example to create a rounded icon button element for your Tailwind CSS project. The circular shape is achieved through the rounded-full class.

<div class="flex items-center gap-4">
  <button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] text-xs bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none rounded-full"
    type="button">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i class="fas fa-heart"
        aria-hidden="true"></i></span></button><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] text-xs bg-gradient-to-tr from-gray-900 to-gray-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] rounded-full"
    type="button">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i class="fas fa-heart"
        aria-hidden="true"></i></span></button><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] text-xs border border-gray-900 text-gray-900 hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] rounded-full"
    type="button">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i class="fas fa-heart"
        aria-hidden="true"></i></span></button><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] text-xs text-gray-900 hover:bg-gray-900/10 active:bg-gray-900/20 rounded-full"
    type="button">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i class="fas fa-heart"
        aria-hidden="true"></i></span>
  </button>
</div>

Icon Button with Link

Use this example to create icon buttons with link element. These buttons are designed to provide users with clickable elements that also serve as links, integrating functionality with navigation within a webpage.

<div class="flex items-center gap-4">
  <a href="#buttons-with-link">
    <button
      class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg bg-gray-900 text-center align-middle font-sans text-xs font-medium uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button"
    >
      <span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
        <i class="fas fa-heart" aria-hidden="true"></i>
      </span>
    </button>
  </a>
  <a href="#buttons-with-link">
    <button
      class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 text-center align-middle font-sans text-xs font-medium uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button"
    >
      <span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
        <i class="fas fa-heart" aria-hidden="true"></i>
      </span>
    </button>
  </a>
  <a href="#buttons-with-link">
    <button
      class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg border border-gray-900 text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button"
    >
      <span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
        <i class="fas fa-heart" aria-hidden="true"></i>
      </span>
    </button>
  </a>
  <a href="#buttons-with-link">
    <button
      class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button"
    >
      <span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
        <i class="fas fa-heart" aria-hidden="true"></i>
      </span>
    </button>
  </a>
</div>

Icon Button Ripple Effect

You can turn on/off the ripple effect for the icon button component by changing data-ripple-light or data-ripple-dark data attributes to true/false. The effect starts from the point of contact (e.g., where the user clicks or taps) and spreads outwards in a circular manner, fading away smoothly.

<div class="flex gap-4 w-max">
  <button
    class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg bg-gray-900 text-center align-middle font-sans text-xs font-medium uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
    type="button" data-ripple-light="true">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
      <i class="fas fa-heart" aria-hidden="true"></i>
    </span>
  </button>
  <button data-ripple-light="true"
    class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg bg-gray-900 text-center align-middle font-sans text-xs font-medium uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
    type="button">
    <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
      <i class="fas fa-heart" aria-hidden="true"></i>
    </span>
  </button>
</div>

Icon Button with Custom Styles

Implement social media buttons with our icon button component example.

In the example below, each button represents a different social media platform through the use of Font Awesome icons and distinct background colors associated with each platform.

<div class="flex gap-4">
  <button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] text-xs text-white shadow-md shadow-gray-900/10 hover:shadow-lg focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none rounded bg-[#ea4335] hover:shadow-[#ea4335]/20 focus:shadow-[#ea4335]/20 active:shadow-[#ea4335]/10"
    type="button">
    <span
      class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i
        class="text-lg fab fa-google"
        aria-hidden="true"></i></span></button><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] text-xs text-white shadow-md shadow-gray-900/10 hover:shadow-lg focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none rounded bg-[#1DA1F2] hover:shadow-[#1DA1F2]/20 focus:shadow-[#1DA1F2]/20 active:shadow-[#1DA1F2]/10"
    type="button">
    <span
      class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i
        class="text-lg fab fa-twitter" aria-hidden="true"></i></span></button><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] text-xs text-white shadow-md shadow-gray-900/10 hover:shadow-lg focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none rounded bg-[#ea4c89] hover:shadow-[#ea4c89]/20 focus:shadow-[#ea4c89]/20 active:shadow-[#ea4c89]/10"
    type="button">
    <span
      class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i
        class="text-lg fab fa-dribbble" aria-hidden="true"></i></span></button><button
    class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-10 max-w-[40px] h-10 max-h-[40px] text-xs text-white shadow-md shadow-gray-900/10 hover:shadow-lg focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none rounded bg-[#333333] hover:shadow-[#333333]/20 focus:shadow-[#333333]/20 active:shadow-[#333333]/10"
    type="button">
    <span
      class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"><i
        class="text-lg fab fa-github"
        aria-hidden="true"></i></span>
  </button>
</div>

Required Scripts

The icon button component needs a required script file for ripple effect to work, you just need to add the below script file to the bottom of your html file.

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html@latest/scripts/ripple.js"></script>
 
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>