pencil alt icon

pencil-alt from Line Awesome by Icons8 · Line · Objects · Apache-2.0 Free for personal and commercial use.

Name: pencil-alt
Set: Line Awesome
Style: Line
Category: Objects
Viewbox: 32×32
License: Apache 2.0
Aliases: pencil-alt-solid

The same icon in other sets

pencil-altFont Awesome Solid pencil-altMajesticons

More objects icons from Line Awesome

ambulance anchor archive baby-carriage bath beer bicycle binoculars blender bomb book briefcase broadcast-tower building building-solid bullseye calculator candy-cane car carrot clipboard clipboard-solid coffee cogs

Use the pencil alt icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M24.688 4.031c-.836 0-1.649.336-2.282.969l-.093.094l-.625-.594L5.188 21l-.063.313l-1.094 5.5l-.312 1.468l1.469-.312l5.5-1.094l.312-.063l16.5-16.5l-.594-.593l.063-.063l.031-.062A3.254 3.254 0 0 0 27 5a3.3 3.3 0 0 0-2.313-.969zm0 1.969c.312 0 .64.14.906.406c.535.535.535 1.246 0 1.782l-.094.093L23.719 6.5l.093-.094c.266-.265.563-.406.875-.406zm-2.97 1.313l2.97 2.968l-1.438 1.469l-3-3zm-2.843 2.875l2.938 2.937l-10.438 10.469l-.406-1.813l-.125-.625l-.625-.125l-1.813-.406zM6.969 22.343l2.187.5l.5 2.187l-2.031.407l-1.063-1.063z"/></svg>

React

import type { SVGProps } from "react";

export function LaPencilAlt(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M24.688 4.031c-.836 0-1.649.336-2.282.969l-.093.094l-.625-.594L5.188 21l-.063.313l-1.094 5.5l-.312 1.468l1.469-.312l5.5-1.094l.312-.063l16.5-16.5l-.594-.593l.063-.063l.031-.062A3.254 3.254 0 0 0 27 5a3.3 3.3 0 0 0-2.313-.969zm0 1.969c.312 0 .64.14.906.406c.535.535.535 1.246 0 1.782l-.094.093L23.719 6.5l.093-.094c.266-.265.563-.406.875-.406zm-2.97 1.313l2.97 2.968l-1.438 1.469l-3-3zm-2.843 2.875l2.938 2.937l-10.438 10.469l-.406-1.813l-.125-.625l-.625-.125l-1.813-.406zM6.969 22.343l2.187.5l.5 2.187l-2.031.407l-1.063-1.063z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M24.688 4.031c-.836 0-1.649.336-2.282.969l-.093.094l-.625-.594L5.188 21l-.063.313l-1.094 5.5l-.312 1.468l1.469-.312l5.5-1.094l.312-.063l16.5-16.5l-.594-.593l.063-.063l.031-.062A3.254 3.254 0 0 0 27 5a3.3 3.3 0 0 0-2.313-.969zm0 1.969c.312 0 .64.14.906.406c.535.535.535 1.246 0 1.782l-.094.093L23.719 6.5l.093-.094c.266-.265.563-.406.875-.406zm-2.97 1.313l2.97 2.968l-1.438 1.469l-3-3zm-2.843 2.875l2.938 2.937l-10.438 10.469l-.406-1.813l-.125-.625l-.625-.125l-1.813-.406zM6.969 22.343l2.187.5l.5 2.187l-2.031.407l-1.063-1.063z"/></svg>
</template>

CSS

.icon-pencil-alt {
  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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M24.688%204.031c-.836%200-1.649.336-2.282.969l-.093.094l-.625-.594L5.188%2021l-.063.313l-1.094%205.5l-.312%201.468l1.469-.312l5.5-1.094l.312-.063l16.5-16.5l-.594-.593l.063-.063l.031-.062A3.254%203.254%200%200%200%2027%205a3.3%203.3%200%200%200-2.313-.969zm0%201.969c.312%200%20.64.14.906.406c.535.535.535%201.246%200%201.782l-.094.093L23.719%206.5l.093-.094c.266-.265.563-.406.875-.406zm-2.97%201.313l2.97%202.968l-1.438%201.469l-3-3zm-2.843%202.875l2.938%202.937l-10.438%2010.469l-.406-1.813l-.125-.625l-.625-.125l-1.813-.406zM6.969%2022.343l2.187.5l.5%202.187l-2.031.407l-1.063-1.063z%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M24.688%204.031c-.836%200-1.649.336-2.282.969l-.093.094l-.625-.594L5.188%2021l-.063.313l-1.094%205.5l-.312%201.468l1.469-.312l5.5-1.094l.312-.063l16.5-16.5l-.594-.593l.063-.063l.031-.062A3.254%203.254%200%200%200%2027%205a3.3%203.3%200%200%200-2.313-.969zm0%201.969c.312%200%20.64.14.906.406c.535.535.535%201.246%200%201.782l-.094.093L23.719%206.5l.093-.094c.266-.265.563-.406.875-.406zm-2.97%201.313l2.97%202.968l-1.438%201.469l-3-3zm-2.843%202.875l2.938%202.937l-10.438%2010.469l-.406-1.813l-.125-.625l-.625-.125l-1.813-.406zM6.969%2022.343l2.187.5l.5%202.187l-2.031.407l-1.063-1.063z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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