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

VS Code Icons · VscEditCode

Edit Code icon

A free edit code 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 aspencil icon pen icon write icon modify icon compose icon draw icon developer icon programming 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/edit-code.json

components/icons/vscode-codicons-edit-code.tsx

import * as React from "react";

/**
 * Edit Code from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/edit-code. Sized in em, colored by currentColor.
 */
export function VscEditCodeIcon(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="M9.854 5.146L11.824 7.116L11.117 7.823L9.147 5.853C8.952 5.658 8.952 5.341 9.147 5.146C9.342 4.951 9.659 4.951 9.854 5.146ZM2 12V4C2 2.895 2.895 2 4 2H12C13.105 2 14 2.895 14 4V6.011C14.044 6.009 14.086 5.998 14.13 5.998C14.431 5.998 14.721 6.057 15 6.146V4C15 2.343 13.657 1 12 1H4C2.343 1 1 2.343 1 4V12C1 13.657 2.343 15 4 15H6.009C6.016 14.884 6.027 14.767 6.055 14.651L6.218 14H4C2.895 14 2 13.105 2 12ZM6.854 10.146L4.708 8L6.854 5.854C7.049 5.659 7.049 5.342 6.854 5.147C6.659 4.952 6.342 4.952 6.147 5.147L3.647 7.647C3.452 7.842 3.452 8.159 3.647 8.354L6.147 10.854C6.342 11.049 6.659 11.049 6.854 10.854C7.049 10.659 7.049 10.342 6.854 10.147V10.146ZM15.452 7.546C14.722 6.816 13.538 6.816 12.807 7.546L7.978 12.375C7.696 12.657 7.497 13.009 7.4 13.396L7.026 14.894C6.863 15.545 7.453 16.135 8.105 15.973L9.603 15.598C9.989 15.501 10.342 15.302 10.624 15.02L15.453 10.191C16.183 9.461 16.183 8.277 15.453 7.546H15.452Z"
      />
    </svg>
  );
}

With react-icons

import { VscEditCode } from "react-icons/vsc";

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

edit-code.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="M9.854 5.146L11.824 7.116L11.117 7.823L9.147 5.853C8.952 5.658 8.952 5.341 9.147 5.146C9.342 4.951 9.659 4.951 9.854 5.146ZM2 12V4C2 2.895 2.895 2 4 2H12C13.105 2 14 2.895 14 4V6.011C14.044 6.009 14.086 5.998 14.13 5.998C14.431 5.998 14.721 6.057 15 6.146V4C15 2.343 13.657 1 12 1H4C2.343 1 1 2.343 1 4V12C1 13.657 2.343 15 4 15H6.009C6.016 14.884 6.027 14.767 6.055 14.651L6.218 14H4C2.895 14 2 13.105 2 12ZM6.854 10.146L4.708 8L6.854 5.854C7.049 5.659 7.049 5.342 6.854 5.147C6.659 4.952 6.342 4.952 6.147 5.147L3.647 7.647C3.452 7.842 3.452 8.159 3.647 8.354L6.147 10.854C6.342 11.049 6.659 11.049 6.854 10.854C7.049 10.659 7.049 10.342 6.854 10.147V10.146ZM15.452 7.546C14.722 6.816 13.538 6.816 12.807 7.546L7.978 12.375C7.696 12.657 7.497 13.009 7.4 13.396L7.026 14.894C6.863 15.545 7.453 16.135 8.105 15.973L9.603 15.598C9.989 15.501 10.342 15.302 10.624 15.02L15.453 10.191C16.183 9.461 16.183 8.277 15.453 7.546H15.452Z"
  />
</svg>

Attribution

"Edit Code" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: pencil, pen, write, modify

Similar VS Code Icons icons