Skip to content
Cuelark UI

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

VS Code Icons · VscCommentDraft

Comment Draft icon

A free comment draft icon from VS Code 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.

Also known aschat iconmessage iconconversation iconbubble icontalk iconsms iconmessenger icon
License
CC BY 4.0 license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/comment-draft.json
components/icons/vscode-codicons-comment-draft.tsx
import * as React from "react";

/**
 * Comment Draft from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/comment-draft. Sized in em, colored by currentColor.
 */
export function VscCommentDraftIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 16 16"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M1.50002 5C1.22402 5 1.00002 4.776 1.00002 4.5C1.00002 3.122 2.12102 2 3.50002 2C3.77602 2 4.00002 2.224 4.00002 2.5C4.00002 2.776 3.77602 3 3.50002 3C2.67302 3 2.00002 3.673 2.00002 4.5C2.00002 4.776 1.77602 5 1.50002 5ZM2.00002 7.5V6.5C2.00002 6.224 1.77602 6 1.50002 6C1.22402 6 1.00002 6.224 1.00002 6.5V7.5C1.00002 7.776 1.22402 8 1.50002 8C1.77602 8 2.00002 7.776 2.00002 7.5ZM5.62502 14.68L8.68702 12H10.499C10.775 12 10.999 11.776 10.999 11.5C10.999 11.224 10.775 11 10.499 11H8.49902C8.37802 11 8.26102 11.044 8.17002 11.124L4.99902 13.943V11.501C4.99902 11.225 4.77502 11.001 4.49902 11.001H3.49902C2.67202 11.001 1.99902 10.328 1.99902 9.501C1.99902 9.225 1.77502 9.001 1.49902 9.001C1.22302 9.001 0.999023 9.225 0.999023 9.501C0.999023 10.879 2.12002 12.001 3.49902 12.001H3.99902V13.943C3.99902 14.494 4.43202 14.925 4.98402 14.925C5.22002 14.925 5.44202 14.84 5.62502 14.68ZM15 9.5C15 9.224 14.776 9 14.5 9C14.224 9 14 9.224 14 9.5C14 10.327 13.327 11 12.5 11C12.224 11 12 11.224 12 11.5C12 11.776 12.224 12 12.5 12C13.879 12 15 10.878 15 9.5ZM15 7.5V6.5C15 6.224 14.776 6 14.5 6C14.224 6 14 6.224 14 6.5V7.5C14 7.776 14.224 8 14.5 8C14.776 8 15 7.776 15 7.5ZM15 4.5C15 3.122 13.879 2 12.5 2C12.224 2 12 2.224 12 2.5C12 2.776 12.224 3 12.5 3C13.327 3 14 3.673 14 4.5C14 4.776 14.224 5 14.5 5C14.776 5 15 4.776 15 4.5ZM11 2.5C11 2.224 10.776 2 10.5 2H5.50002C5.22402 2 5.00002 2.224 5.00002 2.5C5.00002 2.776 5.22402 3 5.50002 3H10.5C10.776 3 11 2.776 11 2.5Z"
      />
    </svg>
  );
}
With react-icons
import { VscCommentDraft } from "react-icons/vsc";

export function Example() {
  return <VscCommentDraft className="size-5" />;
}
comment-draft.svg
<svg
  viewBox="0 0 16 16"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M1.50002 5C1.22402 5 1.00002 4.776 1.00002 4.5C1.00002 3.122 2.12102 2 3.50002 2C3.77602 2 4.00002 2.224 4.00002 2.5C4.00002 2.776 3.77602 3 3.50002 3C2.67302 3 2.00002 3.673 2.00002 4.5C2.00002 4.776 1.77602 5 1.50002 5ZM2.00002 7.5V6.5C2.00002 6.224 1.77602 6 1.50002 6C1.22402 6 1.00002 6.224 1.00002 6.5V7.5C1.00002 7.776 1.22402 8 1.50002 8C1.77602 8 2.00002 7.776 2.00002 7.5ZM5.62502 14.68L8.68702 12H10.499C10.775 12 10.999 11.776 10.999 11.5C10.999 11.224 10.775 11 10.499 11H8.49902C8.37802 11 8.26102 11.044 8.17002 11.124L4.99902 13.943V11.501C4.99902 11.225 4.77502 11.001 4.49902 11.001H3.49902C2.67202 11.001 1.99902 10.328 1.99902 9.501C1.99902 9.225 1.77502 9.001 1.49902 9.001C1.22302 9.001 0.999023 9.225 0.999023 9.501C0.999023 10.879 2.12002 12.001 3.49902 12.001H3.99902V13.943C3.99902 14.494 4.43202 14.925 4.98402 14.925C5.22002 14.925 5.44202 14.84 5.62502 14.68ZM15 9.5C15 9.224 14.776 9 14.5 9C14.224 9 14 9.224 14 9.5C14 10.327 13.327 11 12.5 11C12.224 11 12 11.224 12 11.5C12 11.776 12.224 12 12.5 12C13.879 12 15 10.878 15 9.5ZM15 7.5V6.5C15 6.224 14.776 6 14.5 6C14.224 6 14 6.224 14 6.5V7.5C14 7.776 14.224 8 14.5 8C14.776 8 15 7.776 15 7.5ZM15 4.5C15 3.122 13.879 2 12.5 2C12.224 2 12 2.224 12 2.5C12 2.776 12.224 3 12.5 3C13.327 3 14 3.673 14 4.5C14 4.776 14.224 5 14.5 5C14.776 5 15 4.776 15 4.5ZM11 2.5C11 2.224 10.776 2 10.5 2H5.50002C5.22402 2 5.00002 2.224 5.00002 2.5C5.00002 2.776 5.22402 3 5.50002 3H10.5C10.776 3 11 2.776 11 2.5Z"
  />
</svg>
Attribution
"Comment Draft" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: chat, message, conversation, bubble