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

Themify Icons · TfiPalette

Palette icon

A free palette icon from Themify Icons, 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: MIT license
Project: github.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/themify/palette.json

components/icons/themify-palette.tsx

import * as React from "react";

/**
 * Palette from Themify Icons (https://github.com/lykmapipo/themify-icons), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/themify/palette. Sized in em, colored by currentColor.
 */
export function TfiPaletteIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      version="1.1"
      viewBox="0 0 17 17"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <g />
      <path
        d="M8.5 0.5c-4.411 0-8 3.589-8 8 0 4.281 3.352 7.787 7.631 7.982l1.288 0.059-2.723-2.723c-0.283-0.283-0.439-0.66-0.439-1.061s0.156-0.777 0.439-1.061c0.566-0.566 1.555-0.566 2.121 0l3.719 3.719 0.34-0.223c2.27-1.486 3.624-3.988 3.624-6.692 0-4.411-3.589-8-8-8zM12.66 14.125l-3.135-3.135c-0.943-0.944-2.592-0.944-3.535 0-0.472 0.472-0.732 1.1-0.732 1.768s0.26 1.296 0.732 1.768l0.741 0.741c-3.026-0.783-5.231-3.52-5.231-6.767 0-3.86 3.14-7 7-7s7 3.14 7 7c0 2.23-1.054 4.305-2.84 5.625zM11.5 6.5c-1.103 0-2 0.897-2 2s0.897 2 2 2 2-0.897 2-2-0.897-2-2-2zM11.5 9.5c-0.551 0-1-0.449-1-1s0.449-1 1-1 1 0.449 1 1-0.449 1-1 1zM8.5 6c-0.828 0-1.5-0.671-1.5-1.5s0.672-1.5 1.5-1.5c0.829 0 1.5 0.671 1.5 1.5s-0.671 1.5-1.5 1.5zM5.75 5.891c0 0.552-0.448 1-1 1s-1-0.448-1-1 0.448-1 1-1 1 0.447 1 1z"
      />
    </svg>
  );
}

With react-icons

import { TfiPalette } from "react-icons/tfi";

export function Example() {
  return <TfiPalette className="size-5" />;
}

palette.svg

<svg
  version="1.1"
  viewBox="0 0 17 17"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <g />
  <path
    d="M8.5 0.5c-4.411 0-8 3.589-8 8 0 4.281 3.352 7.787 7.631 7.982l1.288 0.059-2.723-2.723c-0.283-0.283-0.439-0.66-0.439-1.061s0.156-0.777 0.439-1.061c0.566-0.566 1.555-0.566 2.121 0l3.719 3.719 0.34-0.223c2.27-1.486 3.624-3.988 3.624-6.692 0-4.411-3.589-8-8-8zM12.66 14.125l-3.135-3.135c-0.943-0.944-2.592-0.944-3.535 0-0.472 0.472-0.732 1.1-0.732 1.768s0.26 1.296 0.732 1.768l0.741 0.741c-3.026-0.783-5.231-3.52-5.231-6.767 0-3.86 3.14-7 7-7s7 3.14 7 7c0 2.23-1.054 4.305-2.84 5.625zM11.5 6.5c-1.103 0-2 0.897-2 2s0.897 2 2 2 2-0.897 2-2-0.897-2-2-2zM11.5 9.5c-0.551 0-1-0.449-1-1s0.449-1 1-1 1 0.449 1 1-0.449 1-1 1zM8.5 6c-0.828 0-1.5-0.671-1.5-1.5s0.672-1.5 1.5-1.5c0.829 0 1.5 0.671 1.5 1.5s-0.671 1.5-1.5 1.5zM5.75 5.891c0 0.552-0.448 1-1 1s-1-0.448-1-1 0.448-1 1-1 1 0.447 1 1z"
  />
</svg>

Attribution

"Palette" icon from Themify Icons (https://github.com/lykmapipo/themify-icons), licensed under MIT license.

Palette icon in other sets

Similar Themify Icons icons