pencil icon

pencil from Font Awesome Solid by Dave Gandy · Solid · CC-BY-4.0 Attribution required.

Name
pencil
Set
Font Awesome Solid
Style
Solid
Viewbox
640×640
License
CC BY 4.0

The same icon in other sets

pencilAkar IconspencilBootstrap IconspencilBoxIcons v2pencilBoxIcons v2 SolidpencilEmoji One (Colored)pencilFramework7 IconspencilFont Awesome 6 SolidpencilFluent EmojipencilFluent Emoji FlatpencilFluent Emoji High ContrastpencilFirefox OS EmojipencilHeroIconspencilHuge IconspencilHumbleiconspencilIconParkpencilIconPark OutlinepencilIconPark SolidpencilIonIconspencilJam IconspencilMaterial Line IconspencilLucidepencilMajesticonspencilMaterial Design Iconspencil-fillMingCute Icon

Related icons in Font Awesome Solid

pencil-altpencil-rulerpencil-square

Use the pencil icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M100.4 417.2c4.1-14.6 11.8-27.9 22.6-38.7l181.2-181.2l33.9-33.9l104 104l33.9 33.9l-33.9 33.9l-181.2 181.2c-10.7 10.7-24.1 18.5-38.7 22.6L94.4 574.6c-8.3 2.3-17.3 0-23.4-6.2s-8.4-15.1-6.1-23.4zm55.6-3.7c-4.4 4.7-7.6 10.4-9.3 16.6L122.6 517l86.9-24.1c6.4-1.8 12.2-5.1 17-9.7l-70.6-69.7zm354-146.1l-104-104l-34-33.9l44.9-44.9C430.4 71 448.8 63.4 468 63.4s37.6 7.6 51.1 21.2l35.7 35.7c13.6 13.6 21.2 32 21.2 51.1s-7.6 37.6-21.2 51.1l-44.9 44.9z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidPencil(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M100.4 417.2c4.1-14.6 11.8-27.9 22.6-38.7l181.2-181.2l33.9-33.9l104 104l33.9 33.9l-33.9 33.9l-181.2 181.2c-10.7 10.7-24.1 18.5-38.7 22.6L94.4 574.6c-8.3 2.3-17.3 0-23.4-6.2s-8.4-15.1-6.1-23.4zm55.6-3.7c-4.4 4.7-7.6 10.4-9.3 16.6L122.6 517l86.9-24.1c6.4-1.8 12.2-5.1 17-9.7l-70.6-69.7zm354-146.1l-104-104l-34-33.9l44.9-44.9C430.4 71 448.8 63.4 468 63.4s37.6 7.6 51.1 21.2l35.7 35.7c13.6 13.6 21.2 32 21.2 51.1s-7.6 37.6-21.2 51.1l-44.9 44.9z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M100.4 417.2c4.1-14.6 11.8-27.9 22.6-38.7l181.2-181.2l33.9-33.9l104 104l33.9 33.9l-33.9 33.9l-181.2 181.2c-10.7 10.7-24.1 18.5-38.7 22.6L94.4 574.6c-8.3 2.3-17.3 0-23.4-6.2s-8.4-15.1-6.1-23.4zm55.6-3.7c-4.4 4.7-7.6 10.4-9.3 16.6L122.6 517l86.9-24.1c6.4-1.8 12.2-5.1 17-9.7l-70.6-69.7zm354-146.1l-104-104l-34-33.9l44.9-44.9C430.4 71 448.8 63.4 468 63.4s37.6 7.6 51.1 21.2l35.7 35.7c13.6 13.6 21.2 32 21.2 51.1s-7.6 37.6-21.2 51.1l-44.9 44.9z"/></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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M100.4%20417.2c4.1-14.6%2011.8-27.9%2022.6-38.7l181.2-181.2l33.9-33.9l104%20104l33.9%2033.9l-33.9%2033.9l-181.2%20181.2c-10.7%2010.7-24.1%2018.5-38.7%2022.6L94.4%20574.6c-8.3%202.3-17.3%200-23.4-6.2s-8.4-15.1-6.1-23.4zm55.6-3.7c-4.4%204.7-7.6%2010.4-9.3%2016.6L122.6%20517l86.9-24.1c6.4-1.8%2012.2-5.1%2017-9.7l-70.6-69.7zm354-146.1l-104-104l-34-33.9l44.9-44.9C430.4%2071%20448.8%2063.4%20468%2063.4s37.6%207.6%2051.1%2021.2l35.7%2035.7c13.6%2013.6%2021.2%2032%2021.2%2051.1s-7.6%2037.6-21.2%2051.1l-44.9%2044.9z%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M100.4%20417.2c4.1-14.6%2011.8-27.9%2022.6-38.7l181.2-181.2l33.9-33.9l104%20104l33.9%2033.9l-33.9%2033.9l-181.2%20181.2c-10.7%2010.7-24.1%2018.5-38.7%2022.6L94.4%20574.6c-8.3%202.3-17.3%200-23.4-6.2s-8.4-15.1-6.1-23.4zm55.6-3.7c-4.4%204.7-7.6%2010.4-9.3%2016.6L122.6%20517l86.9-24.1c6.4-1.8%2012.2-5.1%2017-9.7l-70.6-69.7zm354-146.1l-104-104l-34-33.9l44.9-44.9C430.4%2071%20448.8%2063.4%20468%2063.4s37.6%207.6%2051.1%2021.2l35.7%2035.7c13.6%2013.6%2021.2%2032%2021.2%2051.1s-7.6%2037.6-21.2%2051.1l-44.9%2044.9z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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