edit icon
edit-fill from Mage Icons by MageIcons · Fill · Apache-2.0 Free for personal and commercial use.
- Name
- edit-fill
- Set
- Mage Icons
- Style
- Fill
- Viewbox
- 24×24
- License
- Apache 2.0
1 other variant in Mage Icons
The same icon in other sets
editAkar Iconsedit-filledAnt Design IconseditBoxIcons v2editBoxIcons v2 SolideditCarboneditCodiconseditElement Plusedit-fillEva IconseditFont Awesome RegulareditFont Awesome SolideditFeather Iconsedit-outlineFlowbite Iconsedit-12-filledFluent UI System Iconsedit-16Fluent UI System Color IconseditIconParkeditIconPark OutlineeditIconPark SolideditIconPark TwoToneeditIconoireditIonIconseditLine AwesomeeditMaterial Line IconseditMaterial SymbolseditMaterial Symbols Light
Related icons in Mage Icons
Use the edit icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.698 21.996h-11.6a3.06 3.06 0 0 1-2.2-.92a3.1 3.1 0 0 1-.9-2.21V7.276a3 3 0 0 1 .91-2.19a3 3 0 0 1 1-.67a3.1 3.1 0 0 1 1.2-.24h4.44a.75.75 0 0 1 0 1.5h-4.44a2 2 0 0 0-.63.12a1.62 1.62 0 0 0-.99 1.5v11.59a1.62 1.62 0 0 0 .47 1.16a1.62 1.62 0 0 0 1.15.47h11.6c.213 0 .423-.04.62-.12a1.5 1.5 0 0 0 .52-.35a1.5 1.5 0 0 0 .35-.52a1.5 1.5 0 0 0 .13-.63v-4.44a.75.75 0 1 1 1.5 0v4.47a3.06 3.06 0 0 1-.92 2.2a3.2 3.2 0 0 1-1 .68c-.387.14-.798.205-1.21.19"/><path fill="currentColor" d="M21.808 5.456a1.9 1.9 0 0 0-.46-.68l-2.15-2.15a1.9 1.9 0 0 0-.68-.46a2.1 2.1 0 0 0-2.31.46l-1.71 1.71v.05l-7.74 7.73a2.1 2.1 0 0 0-.61 1.48v2.17a2.12 2.12 0 0 0 2.11 2.11h2.17a2.07 2.07 0 0 0 1.48-.62l7.74-7.74l1.72-1.72c.202-.19.36-.422.46-.68a2 2 0 0 0 0-1.63zm-1.38 1.05a.6.6 0 0 1-.14.2l-1.22 1.22l-3-3l1.23-1.23a.64.64 0 0 1 .44-.18a.6.6 0 0 1 .23.05q.116.049.2.14l2.16 2.15a.7.7 0 0 1 .13.2a.6.6 0 0 1 0 .23a.6.6 0 0 1-.03.22"/></svg>
React
import type { SVGProps } from "react";
export function MageEditFill(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.698 21.996h-11.6a3.06 3.06 0 0 1-2.2-.92a3.1 3.1 0 0 1-.9-2.21V7.276a3 3 0 0 1 .91-2.19a3 3 0 0 1 1-.67a3.1 3.1 0 0 1 1.2-.24h4.44a.75.75 0 0 1 0 1.5h-4.44a2 2 0 0 0-.63.12a1.62 1.62 0 0 0-.99 1.5v11.59a1.62 1.62 0 0 0 .47 1.16a1.62 1.62 0 0 0 1.15.47h11.6c.213 0 .423-.04.62-.12a1.5 1.5 0 0 0 .52-.35a1.5 1.5 0 0 0 .35-.52a1.5 1.5 0 0 0 .13-.63v-4.44a.75.75 0 1 1 1.5 0v4.47a3.06 3.06 0 0 1-.92 2.2a3.2 3.2 0 0 1-1 .68c-.387.14-.798.205-1.21.19"/><path fill="currentColor" d="M21.808 5.456a1.9 1.9 0 0 0-.46-.68l-2.15-2.15a1.9 1.9 0 0 0-.68-.46a2.1 2.1 0 0 0-2.31.46l-1.71 1.71v.05l-7.74 7.73a2.1 2.1 0 0 0-.61 1.48v2.17a2.12 2.12 0 0 0 2.11 2.11h2.17a2.07 2.07 0 0 0 1.48-.62l7.74-7.74l1.72-1.72c.202-.19.36-.422.46-.68a2 2 0 0 0 0-1.63zm-1.38 1.05a.6.6 0 0 1-.14.2l-1.22 1.22l-3-3l1.23-1.23a.64.64 0 0 1 .44-.18a.6.6 0 0 1 .23.05q.116.049.2.14l2.16 2.15a.7.7 0 0 1 .13.2a.6.6 0 0 1 0 .23a.6.6 0 0 1-.03.22"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.698 21.996h-11.6a3.06 3.06 0 0 1-2.2-.92a3.1 3.1 0 0 1-.9-2.21V7.276a3 3 0 0 1 .91-2.19a3 3 0 0 1 1-.67a3.1 3.1 0 0 1 1.2-.24h4.44a.75.75 0 0 1 0 1.5h-4.44a2 2 0 0 0-.63.12a1.62 1.62 0 0 0-.99 1.5v11.59a1.62 1.62 0 0 0 .47 1.16a1.62 1.62 0 0 0 1.15.47h11.6c.213 0 .423-.04.62-.12a1.5 1.5 0 0 0 .52-.35a1.5 1.5 0 0 0 .35-.52a1.5 1.5 0 0 0 .13-.63v-4.44a.75.75 0 1 1 1.5 0v4.47a3.06 3.06 0 0 1-.92 2.2a3.2 3.2 0 0 1-1 .68c-.387.14-.798.205-1.21.19"/><path fill="currentColor" d="M21.808 5.456a1.9 1.9 0 0 0-.46-.68l-2.15-2.15a1.9 1.9 0 0 0-.68-.46a2.1 2.1 0 0 0-2.31.46l-1.71 1.71v.05l-7.74 7.73a2.1 2.1 0 0 0-.61 1.48v2.17a2.12 2.12 0 0 0 2.11 2.11h2.17a2.07 2.07 0 0 0 1.48-.62l7.74-7.74l1.72-1.72c.202-.19.36-.422.46-.68a2 2 0 0 0 0-1.63zm-1.38 1.05a.6.6 0 0 1-.14.2l-1.22 1.22l-3-3l1.23-1.23a.64.64 0 0 1 .44-.18a.6.6 0 0 1 .23.05q.116.049.2.14l2.16 2.15a.7.7 0 0 1 .13.2a.6.6 0 0 1 0 .23a.6.6 0 0 1-.03.22"/></svg> </template>
CSS
.icon-edit-fill {
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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16.698%2021.996h-11.6a3.06%203.06%200%200%201-2.2-.92a3.1%203.1%200%200%201-.9-2.21V7.276a3%203%200%200%201%20.91-2.19a3%203%200%200%201%201-.67a3.1%203.1%200%200%201%201.2-.24h4.44a.75.75%200%200%201%200%201.5h-4.44a2%202%200%200%200-.63.12a1.62%201.62%200%200%200-.99%201.5v11.59a1.62%201.62%200%200%200%20.47%201.16a1.62%201.62%200%200%200%201.15.47h11.6c.213%200%20.423-.04.62-.12a1.5%201.5%200%200%200%20.52-.35a1.5%201.5%200%200%200%20.35-.52a1.5%201.5%200%200%200%20.13-.63v-4.44a.75.75%200%201%201%201.5%200v4.47a3.06%203.06%200%200%201-.92%202.2a3.2%203.2%200%200%201-1%20.68c-.387.14-.798.205-1.21.19%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.808%205.456a1.9%201.9%200%200%200-.46-.68l-2.15-2.15a1.9%201.9%200%200%200-.68-.46a2.1%202.1%200%200%200-2.31.46l-1.71%201.71v.05l-7.74%207.73a2.1%202.1%200%200%200-.61%201.48v2.17a2.12%202.12%200%200%200%202.11%202.11h2.17a2.07%202.07%200%200%200%201.48-.62l7.74-7.74l1.72-1.72c.202-.19.36-.422.46-.68a2%202%200%200%200%200-1.63zm-1.38%201.05a.6.6%200%200%201-.14.2l-1.22%201.22l-3-3l1.23-1.23a.64.64%200%200%201%20.44-.18a.6.6%200%200%201%20.23.05q.116.049.2.14l2.16%202.15a.7.7%200%200%201%20.13.2a.6.6%200%200%201%200%20.23a.6.6%200%200%201-.03.22%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16.698%2021.996h-11.6a3.06%203.06%200%200%201-2.2-.92a3.1%203.1%200%200%201-.9-2.21V7.276a3%203%200%200%201%20.91-2.19a3%203%200%200%201%201-.67a3.1%203.1%200%200%201%201.2-.24h4.44a.75.75%200%200%201%200%201.5h-4.44a2%202%200%200%200-.63.12a1.62%201.62%200%200%200-.99%201.5v11.59a1.62%201.62%200%200%200%20.47%201.16a1.62%201.62%200%200%200%201.15.47h11.6c.213%200%20.423-.04.62-.12a1.5%201.5%200%200%200%20.52-.35a1.5%201.5%200%200%200%20.35-.52a1.5%201.5%200%200%200%20.13-.63v-4.44a.75.75%200%201%201%201.5%200v4.47a3.06%203.06%200%200%201-.92%202.2a3.2%203.2%200%200%201-1%20.68c-.387.14-.798.205-1.21.19%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.808%205.456a1.9%201.9%200%200%200-.46-.68l-2.15-2.15a1.9%201.9%200%200%200-.68-.46a2.1%202.1%200%200%200-2.31.46l-1.71%201.71v.05l-7.74%207.73a2.1%202.1%200%200%200-.61%201.48v2.17a2.12%202.12%200%200%200%202.11%202.11h2.17a2.07%202.07%200%200%200%201.48-.62l7.74-7.74l1.72-1.72c.202-.19.36-.422.46-.68a2%202%200%200%200%200-1.63zm-1.38%201.05a.6.6%200%200%201-.14.2l-1.22%201.22l-3-3l1.23-1.23a.64.64%200%200%201%20.44-.18a.6.6%200%200%201%20.23.05q.116.049.2.14l2.16%202.15a.7.7%200%200%201%20.13.2a.6.6%200%200%201%200%20.23a.6.6%200%200%201-.03.22%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mage/edit-fill.svg?color=%231a73e8&size=48
