next-icons-logoNext IconsAll Icons
export type IconProps = {
  size?: number | string;
  color?: string;
  className?: string;
} & React.SVGProps<SVGSVGElement>;

export const PenDrawIcon = ({
  size = 24,
  color = "currentColor",
  className,
  ...props
}: IconProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    width={size}
    height={size}
    fill={color}
    className={className}
    {...props}
  >
      <path d="m19.41,5.5c-.78-.78-2.05-.78-2.83,0l-1.29,1.29-1.31,1.31-5.83,1.59-2.01,9.03c-.59.18-1.2.26-1.58.05-.5-.28-.57-1.23-.57-1.77,0-1.87.77-4.02,1.51-6.11,1.06-2.97,1.98-5.53.72-7.31-.75-1.07-2.14-1.59-4.24-1.59v2c.95,0,2.17.13,2.6.74.66.93-.17,3.24-.97,5.48-.76,2.14-1.63,4.56-1.63,6.78,0,1.73.53,2.91,1.59,3.51.49.28,1.03.38,1.57.38s1.08-.11,1.56-.26l.96.96,10.12-2.25,1.59-5.83,1.31-1.31,1.29-1.29c.78-.78.78-2.05,0-2.83l-2.59-2.59Zm-9.56,13.56l3.07-3.07s.05,0,.08,0c.83,0,1.5-.67,1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5,1.5c0,.03,0,.05,0,.08l-3.07,3.07,1.41-6.34,5.14-1.4,2.61,2.61-1.4,5.14-6.34,1.41Zm9.15-7.98l-2.59-2.59.29-.29,1.29-1.29,2.59,2.59-1.29,1.29-.29.29Z" />
  </svg>
);

Icon

PenDraw

Category

text-editor

Use case

Use this icon in navbar items, social link groups, profile actions, settings rows, and call-to-action buttons.

Size

48px

Color

#18181b

Related text-editor icons

AlignCenterAlignLeftAlignRightBoldBorderRadiusCapitalizeCheckListFontColor