edit icon

edit from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name: edit
Set: IonIcons
Style: Regular
Viewbox: 512×512
License: MIT

The same icon in other sets

editAkar Icons editBoxIcons v2 editBoxIcons v2 Solid editCarbon edit-fillEva Icons editFeather Icons edit-12-filledFluent UI System Icons editIconoir editLine Awesome editMaterial Line Icons editMage Icons editMaterial Symbols edit-fillMingCute Icon editOpenMoji editPixelarticons edit-fillRemix Icon editTabler Icons edit-outlineTeenyicons editUnicons

Use the edit icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M163 439.573l-90.569-90.569L322.78 98.656l90.57 90.569z" fill="currentColor"/><path d="M471.723 88.393l-48.115-48.114c-11.723-11.724-31.558-10.896-44.304 1.85l-45.202 45.203 90.569 90.568 45.202-45.202c12.743-12.746 13.572-32.582 1.85-44.305z" fill="currentColor"/><path d="M64.021 363.252L32 480l116.737-32.021z" fill="currentColor"/></svg>

React

import type { SVGProps } from "react";

export function IonEdit(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M163 439.573l-90.569-90.569L322.78 98.656l90.57 90.569z" fill="currentColor"/><path d="M471.723 88.393l-48.115-48.114c-11.723-11.724-31.558-10.896-44.304 1.85l-45.202 45.203 90.569 90.568 45.202-45.202c12.743-12.746 13.572-32.582 1.85-44.305z" fill="currentColor"/><path d="M64.021 363.252L32 480l116.737-32.021z" fill="currentColor"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M163 439.573l-90.569-90.569L322.78 98.656l90.57 90.569z" fill="currentColor"/><path d="M471.723 88.393l-48.115-48.114c-11.723-11.724-31.558-10.896-44.304 1.85l-45.202 45.203 90.569 90.568 45.202-45.202c12.743-12.746 13.572-32.582 1.85-44.305z" fill="currentColor"/><path d="M64.021 363.252L32 480l116.737-32.021z" fill="currentColor"/></svg>
</template>

CSS

.icon-edit {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M163%20439.573l-90.569-90.569L322.78%2098.656l90.57%2090.569z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M471.723%2088.393l-48.115-48.114c-11.723-11.724-31.558-10.896-44.304%201.85l-45.202%2045.203%2090.569%2090.568%2045.202-45.202c12.743-12.746%2013.572-32.582%201.85-44.305z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M64.021%20363.252L32%20480l116.737-32.021z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M163%20439.573l-90.569-90.569L322.78%2098.656l90.57%2090.569z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M471.723%2088.393l-48.115-48.114c-11.723-11.724-31.558-10.896-44.304%201.85l-45.202%2045.203%2090.569%2090.568%2045.202-45.202c12.743-12.746%2013.572-32.582%201.85-44.305z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M64.021%20363.252L32%20480l116.737-32.021z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/edit.svg?color=%231a73e8&size=48