square pen icon

square-pen-fill from Keyline Icons by Keyline Icons · Fill · MIT Free for personal and commercial use.

Name
square-pen-fill
Set
Keyline Icons
Style
Fill
Viewbox
24×24
License
MIT

7 other variants in Keyline Icons

square-pensquare-pen-duotonesquare-pen-sharpsquare-pen-sharp-duotonesquare-pen-sharp-fillsquare-pen-sharp-two-tonesquare-pen-two-tone

The same icon in other sets

square-penFont Awesome 6 Solidsquare-penFont Awesome Solidsquare-penHuge Iconssquare-penLucide

Related icons in Keyline Icons

square-activitysquare-alertsquare-align-offset-bottomsquare-align-offset-leftsquare-align-offset-rightsquare-align-offset-topsquare-arrow-downsquare-arrow-down-leftsquare-arrow-down-rightsquare-arrow-leftsquare-arrow-rightsquare-arrow-u-turn-leftsquare-arrow-u-turn-rightsquare-arrow-upsquare-arrow-up-leftsquare-arrow-up-rightsquare-bar-chartsquare-bar-chart-2square-bar-chart-2-downsquare-bar-chart-2-horizontal-endsquare-bar-chart-2-horizontal-startsquare-bar-chart-downsquare-bar-chart-horizontal-endsquare-bar-chart-horizontal-start

Use the square pen icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path fill="currentColor" d="M10.8714 14.4285L14.9962 12.7786C15.1219 12.7283 15.2361 12.653 15.3319 12.5572L21.1945 6.6945C22.2685 5.6206 22.2685 3.8794 21.1945 2.8055C20.1206 1.7315 18.3794 1.7315 17.3055 2.8055L11.4428 8.6681C11.347 8.7639 11.2717 8.8781 11.2214 9.0038L9.5715 13.1286C9.423 13.5 9.51 13.9242 9.7929 14.2071C10.0758 14.49 10.5 14.577 10.8714 14.4285Z" stroke="none"/><path d="M12 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V12"/></g></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsSquarePenFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"><path fill="currentColor" d="M10.8714 14.4285L14.9962 12.7786C15.1219 12.7283 15.2361 12.653 15.3319 12.5572L21.1945 6.6945C22.2685 5.6206 22.2685 3.8794 21.1945 2.8055C20.1206 1.7315 18.3794 1.7315 17.3055 2.8055L11.4428 8.6681C11.347 8.7639 11.2717 8.8781 11.2214 9.0038L9.5715 13.1286C9.423 13.5 9.51 13.9242 9.7929 14.2071C10.0758 14.49 10.5 14.577 10.8714 14.4285Z" stroke="none"/><path d="M12 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V12"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path fill="currentColor" d="M10.8714 14.4285L14.9962 12.7786C15.1219 12.7283 15.2361 12.653 15.3319 12.5572L21.1945 6.6945C22.2685 5.6206 22.2685 3.8794 21.1945 2.8055C20.1206 1.7315 18.3794 1.7315 17.3055 2.8055L11.4428 8.6681C11.347 8.7639 11.2717 8.8781 11.2214 9.0038L9.5715 13.1286C9.423 13.5 9.51 13.9242 9.7929 14.2071C10.0758 14.49 10.5 14.577 10.8714 14.4285Z" stroke="none"/><path d="M12 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V12"/></g></svg>
</template>

CSS

.icon-square-pen-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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M10.8714%2014.4285L14.9962%2012.7786C15.1219%2012.7283%2015.2361%2012.653%2015.3319%2012.5572L21.1945%206.6945C22.2685%205.6206%2022.2685%203.8794%2021.1945%202.8055C20.1206%201.7315%2018.3794%201.7315%2017.3055%202.8055L11.4428%208.6681C11.347%208.7639%2011.2717%208.8781%2011.2214%209.0038L9.5715%2013.1286C9.423%2013.5%209.51%2013.9242%209.7929%2014.2071C10.0758%2014.49%2010.5%2014.577%2010.8714%2014.4285Z%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M12%203H6C4.34315%203%203%204.34315%203%206V18C3%2019.6569%204.34315%2021%206%2021H18C19.6569%2021%2021%2019.6569%2021%2018V12%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M10.8714%2014.4285L14.9962%2012.7786C15.1219%2012.7283%2015.2361%2012.653%2015.3319%2012.5572L21.1945%206.6945C22.2685%205.6206%2022.2685%203.8794%2021.1945%202.8055C20.1206%201.7315%2018.3794%201.7315%2017.3055%202.8055L11.4428%208.6681C11.347%208.7639%2011.2717%208.8781%2011.2214%209.0038L9.5715%2013.1286C9.423%2013.5%209.51%2013.9242%209.7929%2014.2071C10.0758%2014.49%2010.5%2014.577%2010.8714%2014.4285Z%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M12%203H6C4.34315%203%203%204.34315%203%206V18C3%2019.6569%204.34315%2021%206%2021H18C19.6569%2021%2021%2019.6569%2021%2018V12%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/keyline-icons/square-pen-fill.svg?color=%231a73e8&size=48