Free Tailwind CSS icons

Original icons that take Tailwind classes. They use currentColor, so text, size and hover utilities just work.

Browse all icons Styling guide

How to use them

1Find an icon in the explorer.
2Add Tailwind classes for size and colour.
3Use hover and dark variants like any other element.

Button.tsx

import { HeartIcon } from "@ikions/react";

export function LikeButton() {
  return (
    <button className="inline-flex items-center gap-2 text-slate-600 hover:text-rose-600 dark:text-slate-300">
      <HeartIcon className="size-5" />
      Like
    </button>
  );
}