pen from Emoji One (Colored) by Emoji One · Default · Objects · CC-BY-4.0 Attribution required.

Name
pen
Set
Emoji One (Colored)
Style
Default
Category
Objects
Viewbox
64×64
License
CC BY 4.0

The same emoji in other sets

More objects icons from Emoji One (Colored)

Use the pen emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#93a2aa" d="M36.6 15.1c-1.7 2.6-6.1 5.3-10 7.3c.2.2.6.8.8.8c1.1-.5 2.2-.9 3.3-1.4c2.2-1 4.4-2.3 6.4-3.8c4-3.2 5.5-12.8 8.4-13c1.7 0 3.3 2.5 4.5 3.6l1.7-1.7c.1-.1-1.3-1.4-1.4-1.5c-1.7-1.7-3.7-3.5-6.4-2.5c-3.6 1.4-5.3 9.3-7.3 12.2m9.3-10s.1 0 0 0m-1.3.2q-.15 0 0 0M2.3 60.9c-.3.4-.4.8-.2 1s.7.1 1-.2L5.5 60L4 58.5z"/><g fill="#42ade2"><path d="m28.3 26.3l9.4 9.4l23.4-25l-7.8-7.8z"/><path d="m9.372 46.795l19.729-19.728l7.778 7.778L17.15 54.573z"/></g><path fill="#c7d3d8" d="m3.2 57.7l3.1 3.1l10.9-6.2l-7.8-7.8zm28-34.3l9.4 9.4l-2.9 2.9l-9.4-9.4z"/><path fill="#42ade2" d="m53.8 3.4l6.8 6.8c1.9-1.9 1.9-4.9 0-6.8s-4.9-1.9-6.8 0"/><path fill="#c7d3d8" d="m51.953 3.748l1.414-1.414l8.344 8.344l-1.414 1.414z"/></svg>

React

import type { SVGProps } from "react";

export function EmojionePen(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#93a2aa" d="M36.6 15.1c-1.7 2.6-6.1 5.3-10 7.3c.2.2.6.8.8.8c1.1-.5 2.2-.9 3.3-1.4c2.2-1 4.4-2.3 6.4-3.8c4-3.2 5.5-12.8 8.4-13c1.7 0 3.3 2.5 4.5 3.6l1.7-1.7c.1-.1-1.3-1.4-1.4-1.5c-1.7-1.7-3.7-3.5-6.4-2.5c-3.6 1.4-5.3 9.3-7.3 12.2m9.3-10s.1 0 0 0m-1.3.2q-.15 0 0 0M2.3 60.9c-.3.4-.4.8-.2 1s.7.1 1-.2L5.5 60L4 58.5z"/><g fill="#42ade2"><path d="m28.3 26.3l9.4 9.4l23.4-25l-7.8-7.8z"/><path d="m9.372 46.795l19.729-19.728l7.778 7.778L17.15 54.573z"/></g><path fill="#c7d3d8" d="m3.2 57.7l3.1 3.1l10.9-6.2l-7.8-7.8zm28-34.3l9.4 9.4l-2.9 2.9l-9.4-9.4z"/><path fill="#42ade2" d="m53.8 3.4l6.8 6.8c1.9-1.9 1.9-4.9 0-6.8s-4.9-1.9-6.8 0"/><path fill="#c7d3d8" d="m51.953 3.748l1.414-1.414l8.344 8.344l-1.414 1.414z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#93a2aa" d="M36.6 15.1c-1.7 2.6-6.1 5.3-10 7.3c.2.2.6.8.8.8c1.1-.5 2.2-.9 3.3-1.4c2.2-1 4.4-2.3 6.4-3.8c4-3.2 5.5-12.8 8.4-13c1.7 0 3.3 2.5 4.5 3.6l1.7-1.7c.1-.1-1.3-1.4-1.4-1.5c-1.7-1.7-3.7-3.5-6.4-2.5c-3.6 1.4-5.3 9.3-7.3 12.2m9.3-10s.1 0 0 0m-1.3.2q-.15 0 0 0M2.3 60.9c-.3.4-.4.8-.2 1s.7.1 1-.2L5.5 60L4 58.5z"/><g fill="#42ade2"><path d="m28.3 26.3l9.4 9.4l23.4-25l-7.8-7.8z"/><path d="m9.372 46.795l19.729-19.728l7.778 7.778L17.15 54.573z"/></g><path fill="#c7d3d8" d="m3.2 57.7l3.1 3.1l10.9-6.2l-7.8-7.8zm28-34.3l9.4 9.4l-2.9 2.9l-9.4-9.4z"/><path fill="#42ade2" d="m53.8 3.4l6.8 6.8c1.9-1.9 1.9-4.9 0-6.8s-4.9-1.9-6.8 0"/><path fill="#c7d3d8" d="m51.953 3.748l1.414-1.414l8.344 8.344l-1.414 1.414z"/></svg>
</template>

CSS

.icon-pen {
  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%2064%2064%22%3E%3Cpath%20fill%3D%22%2393a2aa%22%20d%3D%22M36.6%2015.1c-1.7%202.6-6.1%205.3-10%207.3c.2.2.6.8.8.8c1.1-.5%202.2-.9%203.3-1.4c2.2-1%204.4-2.3%206.4-3.8c4-3.2%205.5-12.8%208.4-13c1.7%200%203.3%202.5%204.5%203.6l1.7-1.7c.1-.1-1.3-1.4-1.4-1.5c-1.7-1.7-3.7-3.5-6.4-2.5c-3.6%201.4-5.3%209.3-7.3%2012.2m9.3-10s.1%200%200%200m-1.3.2q-.15%200%200%200M2.3%2060.9c-.3.4-.4.8-.2%201s.7.1%201-.2L5.5%2060L4%2058.5z%22%2F%3E%3Cg%20fill%3D%22%2342ade2%22%3E%3Cpath%20d%3D%22m28.3%2026.3l9.4%209.4l23.4-25l-7.8-7.8z%22%2F%3E%3Cpath%20d%3D%22m9.372%2046.795l19.729-19.728l7.778%207.778L17.15%2054.573z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23c7d3d8%22%20d%3D%22m3.2%2057.7l3.1%203.1l10.9-6.2l-7.8-7.8zm28-34.3l9.4%209.4l-2.9%202.9l-9.4-9.4z%22%2F%3E%3Cpath%20fill%3D%22%2342ade2%22%20d%3D%22m53.8%203.4l6.8%206.8c1.9-1.9%201.9-4.9%200-6.8s-4.9-1.9-6.8%200%22%2F%3E%3Cpath%20fill%3D%22%23c7d3d8%22%20d%3D%22m51.953%203.748l1.414-1.414l8.344%208.344l-1.414%201.414z%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%2064%2064%22%3E%3Cpath%20fill%3D%22%2393a2aa%22%20d%3D%22M36.6%2015.1c-1.7%202.6-6.1%205.3-10%207.3c.2.2.6.8.8.8c1.1-.5%202.2-.9%203.3-1.4c2.2-1%204.4-2.3%206.4-3.8c4-3.2%205.5-12.8%208.4-13c1.7%200%203.3%202.5%204.5%203.6l1.7-1.7c.1-.1-1.3-1.4-1.4-1.5c-1.7-1.7-3.7-3.5-6.4-2.5c-3.6%201.4-5.3%209.3-7.3%2012.2m9.3-10s.1%200%200%200m-1.3.2q-.15%200%200%200M2.3%2060.9c-.3.4-.4.8-.2%201s.7.1%201-.2L5.5%2060L4%2058.5z%22%2F%3E%3Cg%20fill%3D%22%2342ade2%22%3E%3Cpath%20d%3D%22m28.3%2026.3l9.4%209.4l23.4-25l-7.8-7.8z%22%2F%3E%3Cpath%20d%3D%22m9.372%2046.795l19.729-19.728l7.778%207.778L17.15%2054.573z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23c7d3d8%22%20d%3D%22m3.2%2057.7l3.1%203.1l10.9-6.2l-7.8-7.8zm28-34.3l9.4%209.4l-2.9%202.9l-9.4-9.4z%22%2F%3E%3Cpath%20fill%3D%22%2342ade2%22%20d%3D%22m53.8%203.4l6.8%206.8c1.9-1.9%201.9-4.9%200-6.8s-4.9-1.9-6.8%200%22%2F%3E%3Cpath%20fill%3D%22%23c7d3d8%22%20d%3D%22m51.953%203.748l1.414-1.414l8.344%208.344l-1.414%201.414z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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