Tailwind CSS React Icon Button - Horizon UI

Use this example to create user-friendly buttons with icon for your Tailwind CSS and React project.

<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 flex items-center justify-center rounded-full p-2 text-3xl text-white transition duration-200 hover:cursor-pointer dark:text-white">
  <MdChevronRight />
</button>

Icon Button Variants

See our icon button examples below. They come in different styles and color.

<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 flex items-center justify-center rounded-full p-2 text-3xl text-white transition duration-200 hover:cursor-pointer dark:text-white">
  <MdChevronRight />
</button>
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 flex items-center justify-center rounded-xl p-2 text-3xl text-white transition duration-200 hover:cursor-pointer dark:text-white">
  <MdChevronRight />
</button>
<button className="border-brand-500 hover:bg-brand-600/10 active:bg-brand-700/10 dark:border-brand-400 flex items-center justify-center rounded-full border-2 p-2 text-3xl text-white transition duration-200 hover:cursor-pointer dark:bg-white/5 dark:text-white dark:hover:bg-white/10 dark:active:bg-white/20">
  <MdChevronRight className="text-brand-500 dark:text-white" />
</button>
<button className="border-brand-500 hover:bg-brand-600/10 active:bg-brand-700/10 dark:border-brand-400 flex items-center justify-center rounded-xl border-2 p-2 text-3xl text-white transition duration-200 hover:cursor-pointer dark:bg-white/5 dark:text-white dark:hover:bg-white/10 dark:active:bg-white/20">
  <MdChevronRight className="text-brand-500 dark:text-white" />
</button>

Icon Button Sizes

Use this example to create icon buttons in different sizes.

<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 flex items-center justify-center rounded-full p-2 text-3xl text-white transition duration-200 hover:cursor-pointer dark:text-white">
  <MdChevronRight />
</button>
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 flex items-center justify-center rounded-full p-3 text-3xl text-white transition duration-200 hover:cursor-pointer dark:text-white">
  <MdChevronRight />
</button>
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 flex items-center justify-center rounded-full p-3 text-3xl text-white transition duration-200 hover:cursor-pointer dark:text-white">
  <MdChevronRight />
</button>

Icon Button Colors

Use this example to create a simple icon button element for your Tailwind CSS React project.

<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl p-2 text-base font-medium text-white transition duration-200 dark:text-white">
  <MdChevronRight />
</button>
<button className="text-navy-700 rounded-xl bg-gray-100 p-2 text-base font-medium transition duration-200 hover:bg-gray-200 active:bg-gray-300 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/30">
  <MdChevronRight />
</button>
<button className="bg-navy-700 hover:bg-navy-800 active:bg-navy-900 rounded-xl p-2 text-base font-medium text-white transition duration-200 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/30">
  <MdChevronRight />
</button>
<button className="rounded-xl bg-blue-500 p-2 text-base font-medium text-white transition duration-200 hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-400 dark:text-white dark:hover:bg-blue-300 dark:active:bg-blue-200">
  <MdChevronRight />
</button>
<button className="rounded-xl bg-red-500 p-2 text-base font-medium text-white transition duration-200 hover:bg-red-600 active:bg-red-700 dark:bg-red-400 dark:text-white dark:hover:bg-red-300 dark:active:bg-red-200">
  <MdChevronRight />
</button>
<button className="rounded-xl bg-green-500 p-2 text-base font-medium text-white transition duration-200 hover:bg-green-600 active:bg-green-700 dark:bg-green-400 dark:text-white dark:hover:bg-green-300 dark:active:bg-green-200">
  <MdChevronRight />
</button>
<button className="rounded-xl bg-purple-500 p-2 text-base font-medium text-white transition duration-200 hover:bg-purple-600 active:bg-purple-700 dark:bg-purple-400 dark:text-white dark:hover:bg-purple-300 dark:active:bg-purple-200">
  <MdChevronRight />
</button>
<button className="rounded-xl bg-yellow-500 p-2 text-base font-medium text-white transition duration-200 hover:bg-yellow-600 active:bg-yellow-700 dark:bg-yellow-400 dark:text-white dark:hover:bg-yellow-300 dark:active:bg-yellow-200">
  <MdChevronRight />
</button>
<button className="rounded-xl bg-orange-500 p-2 text-base font-medium text-white transition duration-200 hover:bg-orange-600 active:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300 dark:active:bg-orange-200">
  <MdChevronRight />
</button>

data display

input