pencil icon

pencil from Prime Icons by PrimeTek · Regular · MIT Free for personal and commercial use.

Name
pencil
Set
Prime Icons
Style
Regular
Viewbox
24×24
License
MIT

The same icon in other sets

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

Use the pencil icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.21 20.52a.73.73 0 0 1-.52-.21a.75.75 0 0 1-.22-.6l.31-3.84A.73.73 0 0 1 4 15.4L15.06 4.34a3.2 3.2 0 0 1 2.28-.86a3.3 3.3 0 0 1 2.25.91a3.31 3.31 0 0 1 .11 4.5L8.63 20a.77.77 0 0 1-.46.22l-3.89.35Zm1-4.26L5 19l2.74-.25l10.9-10.92A1.72 1.72 0 0 0 17.31 5a1.6 1.6 0 0 0-1.19.42ZM15.59 4.87"/></svg>

React

import type { SVGProps } from "react";

export function PrimePencil(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="M4.21 20.52a.73.73 0 0 1-.52-.21a.75.75 0 0 1-.22-.6l.31-3.84A.73.73 0 0 1 4 15.4L15.06 4.34a3.2 3.2 0 0 1 2.28-.86a3.3 3.3 0 0 1 2.25.91a3.31 3.31 0 0 1 .11 4.5L8.63 20a.77.77 0 0 1-.46.22l-3.89.35Zm1-4.26L5 19l2.74-.25l10.9-10.92A1.72 1.72 0 0 0 17.31 5a1.6 1.6 0 0 0-1.19.42ZM15.59 4.87"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.21 20.52a.73.73 0 0 1-.52-.21a.75.75 0 0 1-.22-.6l.31-3.84A.73.73 0 0 1 4 15.4L15.06 4.34a3.2 3.2 0 0 1 2.28-.86a3.3 3.3 0 0 1 2.25.91a3.31 3.31 0 0 1 .11 4.5L8.63 20a.77.77 0 0 1-.46.22l-3.89.35Zm1-4.26L5 19l2.74-.25l10.9-10.92A1.72 1.72 0 0 0 17.31 5a1.6 1.6 0 0 0-1.19.42ZM15.59 4.87"/></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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.21%2020.52a.73.73%200%200%201-.52-.21a.75.75%200%200%201-.22-.6l.31-3.84A.73.73%200%200%201%204%2015.4L15.06%204.34a3.2%203.2%200%200%201%202.28-.86a3.3%203.3%200%200%201%202.25.91a3.31%203.31%200%200%201%20.11%204.5L8.63%2020a.77.77%200%200%201-.46.22l-3.89.35Zm1-4.26L5%2019l2.74-.25l10.9-10.92A1.72%201.72%200%200%200%2017.31%205a1.6%201.6%200%200%200-1.19.42ZM15.59%204.87%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%22M4.21%2020.52a.73.73%200%200%201-.52-.21a.75.75%200%200%201-.22-.6l.31-3.84A.73.73%200%200%201%204%2015.4L15.06%204.34a3.2%203.2%200%200%201%202.28-.86a3.3%203.3%200%200%201%202.25.91a3.31%203.31%200%200%201%20.11%204.5L8.63%2020a.77.77%200%200%201-.46.22l-3.89.35Zm1-4.26L5%2019l2.74-.25l10.9-10.92A1.72%201.72%200%200%200%2017.31%205a1.6%201.6%200%200%200-1.19.42ZM15.59%204.87%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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