Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: float. Pick another to preview it and update the animated code:

Remix Icon · RiTailwindCssFill

Tailwind Css Fill icon

A free tailwind css fill icon from Remix Icon, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License
Apache License Version 2.0
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/remix/tailwind-css-fill.json
components/icons/remix-tailwind-css-fill.tsx
import * as React from "react";

/**
 * Tailwind Css Fill from Remix Icon (https://github.com/Remix-Design/RemixIcon), Apache License Version 2.0.
 * Via Cuelark UI: ui.cuelark.com/icons/remix/tailwind-css-fill. Sized in em, colored by currentColor.
 */
export function RiTailwindCssFillIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M11.9996 4.85999C8.82628 4.85999 6.84294 6.44665 6.04961 9.61999C7.23961 8.03332 8.62794 7.43832 10.2146 7.83499C11.12 8.06109 11.7666 8.71757 12.4835 9.44545C13.6507 10.6295 15.0004 12 17.9496 12C21.1229 12 23.1063 10.4133 23.8996 7.23998C22.7096 8.82665 21.3213 9.42165 19.7346 9.02499C18.8292 8.79889 18.1827 8.1424 17.4657 7.41452C16.2995 6.23047 14.9498 4.85999 11.9996 4.85999ZM6.04961 12C2.87628 12 0.892943 13.5867 0.0996094 16.76C1.28961 15.1733 2.67794 14.5783 4.26461 14.975C5.17 15.2011 5.81657 15.8576 6.53354 16.5855C7.70073 17.7695 9.05039 19.14 11.9996 19.14C15.1729 19.14 17.1563 17.5533 17.9496 14.38C16.7596 15.9667 15.3713 16.5617 13.7846 16.165C12.8792 15.9389 12.2326 15.2824 11.5157 14.5545C10.3495 13.3705 8.99982 12 6.04961 12Z"
      />
    </svg>
  );
}
With react-icons
import { RiTailwindCssFill } from "react-icons/ri";

export function Example() {
  return <RiTailwindCssFill className="size-5" />;
}
tailwind-css-fill.svg
<svg
  viewBox="0 0 24 24"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M11.9996 4.85999C8.82628 4.85999 6.84294 6.44665 6.04961 9.61999C7.23961 8.03332 8.62794 7.43832 10.2146 7.83499C11.12 8.06109 11.7666 8.71757 12.4835 9.44545C13.6507 10.6295 15.0004 12 17.9496 12C21.1229 12 23.1063 10.4133 23.8996 7.23998C22.7096 8.82665 21.3213 9.42165 19.7346 9.02499C18.8292 8.79889 18.1827 8.1424 17.4657 7.41452C16.2995 6.23047 14.9498 4.85999 11.9996 4.85999ZM6.04961 12C2.87628 12 0.892943 13.5867 0.0996094 16.76C1.28961 15.1733 2.67794 14.5783 4.26461 14.975C5.17 15.2011 5.81657 15.8576 6.53354 16.5855C7.70073 17.7695 9.05039 19.14 11.9996 19.14C15.1729 19.14 17.1563 17.5533 17.9496 14.38C16.7596 15.9667 15.3713 16.5617 13.7846 16.165C12.8792 15.9389 12.2326 15.2824 11.5157 14.5545C10.3495 13.3705 8.99982 12 6.04961 12Z"
  />
</svg>
Attribution
"Tailwind Css Fill" icon from Remix Icon (https://github.com/Remix-Design/RemixIcon), licensed under Apache License Version 2.0.

Related icons: