Skip to content
Cuelark UI

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

Remix Icon · RiDrawFill

Draw Fill icon

A free draw 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.

Also known asedit iconpencil iconpen iconwrite iconmodify iconcompose icon
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/draw-fill.json
components/icons/remix-draw-fill.tsx
import * as React from "react";

/**
 * Draw Fill from Remix Icon (https://github.com/Remix-Design/RemixIcon), Apache License Version 2.0.
 * Via Cuelark UI: ui.cuelark.com/icons/remix/draw-fill. Sized in em, colored by currentColor.
 */
export function RiDrawFillIcon(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="M17.6562 2.10059C18.0467 1.71006 18.6807 1.71006 19.0712 2.10059L21.8994 4.92871C22.2898 5.31916 22.2897 5.95223 21.8994 6.34277L18.2275 10.0137C19.0884 11.1333 19.7705 12.2497 20.2265 13.2861C20.6077 14.1526 20.8537 15.0124 20.8867 15.7979C20.9197 16.5844 20.7382 17.4043 20.1318 18.0107C19.3187 18.8239 18.1403 18.8753 17.0908 18.6602C16.0057 18.4377 14.7879 17.8851 13.5634 17.1104L14.6337 15.4199C15.7389 16.1191 16.7261 16.5441 17.4921 16.7012C18.294 16.8656 18.6148 16.6996 18.7177 16.5967C18.7947 16.5197 18.9074 16.3312 18.8886 15.8818C18.8696 15.4312 18.7177 14.8253 18.3955 14.0928C18.0387 13.2819 17.4993 12.3758 16.8007 11.4404L14.8281 13.4141C14.6405 13.6016 14.3863 13.707 14.1211 13.707H11.2929C10.7406 13.707 10.2929 13.2593 10.2929 12.707V9.87891C10.2929 9.61369 10.3984 9.35941 10.5859 9.17188L12.4423 7.31348C11.4841 6.74889 10.5119 6.37075 9.59567 6.1875C7.88747 5.84607 6.49717 6.1885 5.63571 7.04981C4.7742 7.91131 4.43183 9.30225 4.77341 11.0107C5.11353 12.711 6.11989 14.6051 7.7568 16.2422C9.51458 18 11.565 19.0287 13.3525 19.29L13.0634 21.2686C10.7845 20.9353 8.35452 19.669 6.34274 17.6572C4.46525 15.7797 3.24014 13.5407 2.81247 11.4023C2.38669 9.27248 2.74027 7.11712 4.22165 5.63574C5.70308 4.15446 7.85838 3.80071 9.98824 4.22656C11.2885 4.48662 12.6249 5.04309 13.8955 5.86035L17.6562 2.10059Z"
      />
    </svg>
  );
}
With react-icons
import { RiDrawFill } from "react-icons/ri";

export function Example() {
  return <RiDrawFill className="size-5" />;
}
draw-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="M17.6562 2.10059C18.0467 1.71006 18.6807 1.71006 19.0712 2.10059L21.8994 4.92871C22.2898 5.31916 22.2897 5.95223 21.8994 6.34277L18.2275 10.0137C19.0884 11.1333 19.7705 12.2497 20.2265 13.2861C20.6077 14.1526 20.8537 15.0124 20.8867 15.7979C20.9197 16.5844 20.7382 17.4043 20.1318 18.0107C19.3187 18.8239 18.1403 18.8753 17.0908 18.6602C16.0057 18.4377 14.7879 17.8851 13.5634 17.1104L14.6337 15.4199C15.7389 16.1191 16.7261 16.5441 17.4921 16.7012C18.294 16.8656 18.6148 16.6996 18.7177 16.5967C18.7947 16.5197 18.9074 16.3312 18.8886 15.8818C18.8696 15.4312 18.7177 14.8253 18.3955 14.0928C18.0387 13.2819 17.4993 12.3758 16.8007 11.4404L14.8281 13.4141C14.6405 13.6016 14.3863 13.707 14.1211 13.707H11.2929C10.7406 13.707 10.2929 13.2593 10.2929 12.707V9.87891C10.2929 9.61369 10.3984 9.35941 10.5859 9.17188L12.4423 7.31348C11.4841 6.74889 10.5119 6.37075 9.59567 6.1875C7.88747 5.84607 6.49717 6.1885 5.63571 7.04981C4.7742 7.91131 4.43183 9.30225 4.77341 11.0107C5.11353 12.711 6.11989 14.6051 7.7568 16.2422C9.51458 18 11.565 19.0287 13.3525 19.29L13.0634 21.2686C10.7845 20.9353 8.35452 19.669 6.34274 17.6572C4.46525 15.7797 3.24014 13.5407 2.81247 11.4023C2.38669 9.27248 2.74027 7.11712 4.22165 5.63574C5.70308 4.15446 7.85838 3.80071 9.98824 4.22656C11.2885 4.48662 12.6249 5.04309 13.8955 5.86035L17.6562 2.10059Z"
  />
</svg>
Attribution
"Draw Fill" icon from Remix Icon (https://github.com/Remix-Design/RemixIcon), licensed under Apache License Version 2.0.

Related icons: edit, pencil, pen, write