pencil emoji
pencil from Emoji One (Colored) by Emoji One · Default · Objects · CC-BY-4.0 Attribution required.
- Name
- pencil
- Set
- Emoji One (Colored)
- Style
- Default
- Category
- Objects
- Viewbox
- 64×64
- License
- CC BY 4.0
The same emoji in other sets
pencilAkar IconspencilBootstrap IconspencilBoxIcons v2pencilBoxIcons v2 SolidpencilFramework7 IconspencilFont Awesome 6 SolidpencilFont Awesome SolidpencilFluent EmojipencilFluent Emoji FlatpencilFluent Emoji High ContrastpencilFirefox OS EmojipencilHeroIconspencilHuge IconspencilHumbleiconspencilIconParkpencilIconPark OutlinepencilIconPark SolidpencilIonIconspencilJam IconspencilMaterial Line IconspencilLucidepencilMajesticonspencilMaterial Design Iconspencil-fillMingCute Icon
More objects icons from Emoji One (Colored)
Use the pencil emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#ffce31" d="M7.934 41.132L39.828 9.246l14.918 14.922l-31.895 31.886z"/><path fill="#ed4c5c" d="m61.3 4.6l-1.9-1.9C55.8-.9 50-.9 46.3 2.7l-6.5 6.5l15 15l6.5-6.5c3.6-3.6 3.6-9.5 0-13.1"/><path fill="#93a2aa" d="m35.782 13.31l4.1-4.102l14.92 14.92l-4.1 4.101z"/><path fill="#c7d3d8" d="m37.338 14.865l4.1-4.101l11.739 11.738l-4.102 4.1z"/><path fill="#fed0ac" d="m7.9 41.1l-6.5 17l4.5 4.5l17-6.5z"/><path fill="#333" d="M.3 61.1c-.9 2.4.3 3.5 2.7 2.6l8.2-3.1l-7.7-7.7z"/><path fill="#ffdf85" d="m7.89 41.175l27.86-27.86l4.95 4.95l-27.86 27.86z"/><path fill="#ff8736" d="m17.904 51.142l27.86-27.86l4.95 4.95l-27.86 27.86z"/></svg>
React
import type { SVGProps } from "react";
export function EmojionePencil(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#ffce31" d="M7.934 41.132L39.828 9.246l14.918 14.922l-31.895 31.886z"/><path fill="#ed4c5c" d="m61.3 4.6l-1.9-1.9C55.8-.9 50-.9 46.3 2.7l-6.5 6.5l15 15l6.5-6.5c3.6-3.6 3.6-9.5 0-13.1"/><path fill="#93a2aa" d="m35.782 13.31l4.1-4.102l14.92 14.92l-4.1 4.101z"/><path fill="#c7d3d8" d="m37.338 14.865l4.1-4.101l11.739 11.738l-4.102 4.1z"/><path fill="#fed0ac" d="m7.9 41.1l-6.5 17l4.5 4.5l17-6.5z"/><path fill="#333" d="M.3 61.1c-.9 2.4.3 3.5 2.7 2.6l8.2-3.1l-7.7-7.7z"/><path fill="#ffdf85" d="m7.89 41.175l27.86-27.86l4.95 4.95l-27.86 27.86z"/><path fill="#ff8736" d="m17.904 51.142l27.86-27.86l4.95 4.95l-27.86 27.86z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#ffce31" d="M7.934 41.132L39.828 9.246l14.918 14.922l-31.895 31.886z"/><path fill="#ed4c5c" d="m61.3 4.6l-1.9-1.9C55.8-.9 50-.9 46.3 2.7l-6.5 6.5l15 15l6.5-6.5c3.6-3.6 3.6-9.5 0-13.1"/><path fill="#93a2aa" d="m35.782 13.31l4.1-4.102l14.92 14.92l-4.1 4.101z"/><path fill="#c7d3d8" d="m37.338 14.865l4.1-4.101l11.739 11.738l-4.102 4.1z"/><path fill="#fed0ac" d="m7.9 41.1l-6.5 17l4.5 4.5l17-6.5z"/><path fill="#333" d="M.3 61.1c-.9 2.4.3 3.5 2.7 2.6l8.2-3.1l-7.7-7.7z"/><path fill="#ffdf85" d="m7.89 41.175l27.86-27.86l4.95 4.95l-27.86 27.86z"/><path fill="#ff8736" d="m17.904 51.142l27.86-27.86l4.95 4.95l-27.86 27.86z"/></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%2064%2064%22%3E%3Cpath%20fill%3D%22%23ffce31%22%20d%3D%22M7.934%2041.132L39.828%209.246l14.918%2014.922l-31.895%2031.886z%22%2F%3E%3Cpath%20fill%3D%22%23ed4c5c%22%20d%3D%22m61.3%204.6l-1.9-1.9C55.8-.9%2050-.9%2046.3%202.7l-6.5%206.5l15%2015l6.5-6.5c3.6-3.6%203.6-9.5%200-13.1%22%2F%3E%3Cpath%20fill%3D%22%2393a2aa%22%20d%3D%22m35.782%2013.31l4.1-4.102l14.92%2014.92l-4.1%204.101z%22%2F%3E%3Cpath%20fill%3D%22%23c7d3d8%22%20d%3D%22m37.338%2014.865l4.1-4.101l11.739%2011.738l-4.102%204.1z%22%2F%3E%3Cpath%20fill%3D%22%23fed0ac%22%20d%3D%22m7.9%2041.1l-6.5%2017l4.5%204.5l17-6.5z%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M.3%2061.1c-.9%202.4.3%203.5%202.7%202.6l8.2-3.1l-7.7-7.7z%22%2F%3E%3Cpath%20fill%3D%22%23ffdf85%22%20d%3D%22m7.89%2041.175l27.86-27.86l4.95%204.95l-27.86%2027.86z%22%2F%3E%3Cpath%20fill%3D%22%23ff8736%22%20d%3D%22m17.904%2051.142l27.86-27.86l4.95%204.95l-27.86%2027.86z%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%23ffce31%22%20d%3D%22M7.934%2041.132L39.828%209.246l14.918%2014.922l-31.895%2031.886z%22%2F%3E%3Cpath%20fill%3D%22%23ed4c5c%22%20d%3D%22m61.3%204.6l-1.9-1.9C55.8-.9%2050-.9%2046.3%202.7l-6.5%206.5l15%2015l6.5-6.5c3.6-3.6%203.6-9.5%200-13.1%22%2F%3E%3Cpath%20fill%3D%22%2393a2aa%22%20d%3D%22m35.782%2013.31l4.1-4.102l14.92%2014.92l-4.1%204.101z%22%2F%3E%3Cpath%20fill%3D%22%23c7d3d8%22%20d%3D%22m37.338%2014.865l4.1-4.101l11.739%2011.738l-4.102%204.1z%22%2F%3E%3Cpath%20fill%3D%22%23fed0ac%22%20d%3D%22m7.9%2041.1l-6.5%2017l4.5%204.5l17-6.5z%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M.3%2061.1c-.9%202.4.3%203.5%202.7%202.6l8.2-3.1l-7.7-7.7z%22%2F%3E%3Cpath%20fill%3D%22%23ffdf85%22%20d%3D%22m7.89%2041.175l27.86-27.86l4.95%204.95l-27.86%2027.86z%22%2F%3E%3Cpath%20fill%3D%22%23ff8736%22%20d%3D%22m17.904%2051.142l27.86-27.86l4.95%204.95l-27.86%2027.86z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/emojione/pencil.svg?color=%231a73e8&size=48
