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

BoxIcons · BiPalette

Palette icon

A free palette icon from BoxIcons, 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/boxicons/palette.json

components/icons/boxicons-palette.tsx

import * as React from "react";

/**
 * Palette from BoxIcons (https://github.com/atisawd/boxicons), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/boxicons/palette. Sized in em, colored by currentColor.
 */
export function BiPaletteIcon(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="M13.4 2.096a10.08 10.08 0 0 0-8.937 3.331A10.054 10.054 0 0 0 2.096 13.4c.53 3.894 3.458 7.207 7.285 8.246a9.982 9.982 0 0 0 2.618.354l.142-.001a3.001 3.001 0 0 0 2.516-1.426 2.989 2.989 0 0 0 .153-2.879l-.199-.416a1.919 1.919 0 0 1 .094-1.912 2.004 2.004 0 0 1 2.576-.755l.412.197c.412.198.85.299 1.301.299A3.022 3.022 0 0 0 22 12.14a9.935 9.935 0 0 0-.353-2.76c-1.04-3.826-4.353-6.754-8.247-7.284zm5.158 10.909-.412-.197c-1.828-.878-4.07-.198-5.135 1.494-.738 1.176-.813 2.576-.204 3.842l.199.416a.983.983 0 0 1-.051.961.992.992 0 0 1-.844.479h-.112a8.061 8.061 0 0 1-2.095-.283c-3.063-.831-5.403-3.479-5.826-6.586-.321-2.355.352-4.623 1.893-6.389a8.002 8.002 0 0 1 7.16-2.664c3.107.423 5.755 2.764 6.586 5.826.198.73.293 1.474.282 2.207-.012.807-.845 1.183-1.441.894z"
      />
      <circle cx="7.5" cy="14.5" r="1.5" />
      <circle cx="7.5" cy="10.5" r="1.5" />
      <circle cx="10.5" cy="7.5" r="1.5" />
      <circle cx="14.5" cy="7.5" r="1.5" />
    </svg>
  );
}

With react-icons

import { BiPalette } from "react-icons/bi";

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

palette.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="M13.4 2.096a10.08 10.08 0 0 0-8.937 3.331A10.054 10.054 0 0 0 2.096 13.4c.53 3.894 3.458 7.207 7.285 8.246a9.982 9.982 0 0 0 2.618.354l.142-.001a3.001 3.001 0 0 0 2.516-1.426 2.989 2.989 0 0 0 .153-2.879l-.199-.416a1.919 1.919 0 0 1 .094-1.912 2.004 2.004 0 0 1 2.576-.755l.412.197c.412.198.85.299 1.301.299A3.022 3.022 0 0 0 22 12.14a9.935 9.935 0 0 0-.353-2.76c-1.04-3.826-4.353-6.754-8.247-7.284zm5.158 10.909-.412-.197c-1.828-.878-4.07-.198-5.135 1.494-.738 1.176-.813 2.576-.204 3.842l.199.416a.983.983 0 0 1-.051.961.992.992 0 0 1-.844.479h-.112a8.061 8.061 0 0 1-2.095-.283c-3.063-.831-5.403-3.479-5.826-6.586-.321-2.355.352-4.623 1.893-6.389a8.002 8.002 0 0 1 7.16-2.664c3.107.423 5.755 2.764 6.586 5.826.198.73.293 1.474.282 2.207-.012.807-.845 1.183-1.441.894z"
  />
  <circle cx="7.5" cy="14.5" r="1.5" />
  <circle cx="7.5" cy="10.5" r="1.5" />
  <circle cx="10.5" cy="7.5" r="1.5" />
  <circle cx="14.5" cy="7.5" r="1.5" />
</svg>

Attribution

"Palette" icon from BoxIcons (https://github.com/atisawd/boxicons), licensed under MIT license.

Related icons:

solid palette

Related icons:

Palette icon in other sets

Similar BoxIcons icons