Skip to content
Cuelark UI

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

css.gg · CgEditStraight

Edit Straight icon

A free edit straight icon from css.gg, 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 iconpen iconwrite iconmodify iconcompose icondraw icon
License
MIT license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/css-gg/edit-straight.json
components/icons/css-gg-edit-straight.tsx
import * as React from "react";

/**
 * Edit Straight from css.gg (https://github.com/astrit/css.gg), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/css-gg/edit-straight. Sized in em, colored by currentColor.
 */
export function CgEditStraightIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      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="M12 4C15.866 4 19 7.13401 19 11H5C5 7.13401 8.13401 4 12 4Z" fill="currentColor" />
      <path d="M5 13H1V11H5V13Z" fill="currentColor" />
      <path
        d="M19 13C19 16.866 15.866 20 12 20C8.13401 20 5 16.866 5 13H19Z"
        fill="currentColor"
      />
      <path d="M19 13V11H23V13H19Z" fill="currentColor" />
    </svg>
  );
}
With react-icons
import { CgEditStraight } from "react-icons/cg";

export function Example() {
  return <CgEditStraight className="size-5" />;
}
edit-straight.svg
<svg
  fill="none"
  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="M12 4C15.866 4 19 7.13401 19 11H5C5 7.13401 8.13401 4 12 4Z" fill="currentColor" />
  <path d="M5 13H1V11H5V13Z" fill="currentColor" />
  <path
    d="M19 13C19 16.866 15.866 20 12 20C8.13401 20 5 16.866 5 13H19Z"
    fill="currentColor"
  />
  <path d="M19 13V11H23V13H19Z" fill="currentColor" />
</svg>
Attribution
"Edit Straight" icon from css.gg (https://github.com/astrit/css.gg), licensed under MIT license.

Related icons: pencil, pen, write, modify