pencil icon
pencil from Font Awesome 6 Solid by Dave Gandy · Regular · CC-BY-4.0 Attribution required.
- Name
- pencil
- Set
- Font Awesome 6 Solid
- Style
- Regular
- Viewbox
- 512×512
- License
- CC BY 4.0
The same icon in other sets
pencilAkar IconspencilBootstrap IconspencilBoxIcons v2pencilBoxIcons v2 SolidpencilEmoji One (Colored)pencilFramework7 IconspencilFont Awesome SolidpencilFluent EmojipencilFluent Emoji FlatpencilFluent Emoji High ContrastpencilFirefox OS EmojipencilHeroIconspencilHuge IconspencilHumbleiconspencilIconParkpencilIconPark OutlinepencilIconPark SolidpencilIonIconspencilJam IconspencilMaterial Line IconspencilLucidepencilMajesticonspencilMaterial Design Iconspencil-fillMingCute Icon
Use the pencil icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m410.3 231l11.3-11.3l-33.9-33.9l-62.1-62.1l-33.9-33.9l-11.3 11.3l-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2l199.2-199.2zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9l-78.2 23l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7l-14.4 14.5l-22.6 22.6l-11.4 11.3l33.9 33.9l62.1 62.1l33.9 33.9l11.3-11.3l22.6-22.6l14.5-14.5c25-25 25-65.5 0-90.5l-39.3-39.4c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6"/></svg>
React
import type { SVGProps } from "react";
export function Fa6SolidPencil(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m410.3 231l11.3-11.3l-33.9-33.9l-62.1-62.1l-33.9-33.9l-11.3 11.3l-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2l199.2-199.2zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9l-78.2 23l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7l-14.4 14.5l-22.6 22.6l-11.4 11.3l33.9 33.9l62.1 62.1l33.9 33.9l11.3-11.3l22.6-22.6l14.5-14.5c25-25 25-65.5 0-90.5l-39.3-39.4c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m410.3 231l11.3-11.3l-33.9-33.9l-62.1-62.1l-33.9-33.9l-11.3 11.3l-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2l199.2-199.2zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9l-78.2 23l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7l-14.4 14.5l-22.6 22.6l-11.4 11.3l33.9 33.9l62.1 62.1l33.9 33.9l11.3-11.3l22.6-22.6l14.5-14.5c25-25 25-65.5 0-90.5l-39.3-39.4c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6"/></svg> </template>
CSS
.icon-pencil {
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%20fill%3D%22currentColor%22%20d%3D%22m410.3%20231l11.3-11.3l-33.9-33.9l-62.1-62.1l-33.9-33.9l-11.3%2011.3l-22.6%2022.6L58.6%20322.9c-10.4%2010.4-18%2023.3-22.2%2037.4L1%20480.7c-2.5%208.4-.2%2017.5%206.1%2023.7s15.3%208.5%2023.7%206.1l120.3-35.4c14.1-4.2%2027-11.8%2037.4-22.2l199.2-199.2zM160%20399.4l-9.1%2022.7c-4%203.1-8.5%205.4-13.3%206.9l-78.2%2023l23-78.1c1.4-4.9%203.8-9.4%206.9-13.3l22.7-9.1v32c0%208.8%207.2%2016%2016%2016h32zM362.7%2018.7l-14.4%2014.5l-22.6%2022.6l-11.4%2011.3l33.9%2033.9l62.1%2062.1l33.9%2033.9l11.3-11.3l22.6-22.6l14.5-14.5c25-25%2025-65.5%200-90.5l-39.3-39.4c-25-25-65.5-25-90.5%200zm-47.4%20168l-144%20144c-6.2%206.2-16.4%206.2-22.6%200s-6.2-16.4%200-22.6l144-144c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6%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%20fill%3D%22currentColor%22%20d%3D%22m410.3%20231l11.3-11.3l-33.9-33.9l-62.1-62.1l-33.9-33.9l-11.3%2011.3l-22.6%2022.6L58.6%20322.9c-10.4%2010.4-18%2023.3-22.2%2037.4L1%20480.7c-2.5%208.4-.2%2017.5%206.1%2023.7s15.3%208.5%2023.7%206.1l120.3-35.4c14.1-4.2%2027-11.8%2037.4-22.2l199.2-199.2zM160%20399.4l-9.1%2022.7c-4%203.1-8.5%205.4-13.3%206.9l-78.2%2023l23-78.1c1.4-4.9%203.8-9.4%206.9-13.3l22.7-9.1v32c0%208.8%207.2%2016%2016%2016h32zM362.7%2018.7l-14.4%2014.5l-22.6%2022.6l-11.4%2011.3l33.9%2033.9l62.1%2062.1l33.9%2033.9l11.3-11.3l22.6-22.6l14.5-14.5c25-25%2025-65.5%200-90.5l-39.3-39.4c-25-25-65.5-25-90.5%200zm-47.4%20168l-144%20144c-6.2%206.2-16.4%206.2-22.6%200s-6.2-16.4%200-22.6l144-144c6.2-6.2%2016.4-6.2%2022.6%200s6.2%2016.4%200%2022.6%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-solid/pencil.svg?color=%231a73e8&size=48
