hole emoji
hole from Fluent Emoji by Microsoft Corporation · Default · MIT Free for personal and commercial use.
- Name
- hole
- Set
- Fluent Emoji
- Style
- Default
- Viewbox
- 32×32
- License
- MIT
The same emoji in other sets
Use the hole emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="url(#iimPJuj)" d="M16 30.137c7.732 0 14-3.643 14-8.137s-6.268-8.137-14-8.137S2 17.506 2 22s6.268 8.137 14 8.137"/><path fill="url(#iVscicM)" d="M16 30.067c7.185 0 13.01-3.157 13.01-7.051s-5.825-7.05-13.01-7.05s-13.01 3.156-13.01 7.05s5.825 7.05 13.01 7.05"/><defs><radialGradient id="iimPJuj" cx="0" cy="0" r="1" gradientTransform="matrix(4.75001 -11.87503 12.18115 4.87246 23.25 15.613)" gradientUnits="userSpaceOnUse"><stop stop-color="#D8D1DF"/><stop offset=".989" stop-color="#90829F"/></radialGradient><radialGradient id="iVscicM" cx="0" cy="0" r="1" gradientTransform="matrix(9.74999 -19.62496 54.14327 26.89922 10.5 31.738)" gradientUnits="userSpaceOnUse"><stop offset=".006" stop-color="#37275E"/><stop offset="1"/></radialGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentEmojiHole(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="url(#iimPJuj)" d="M16 30.137c7.732 0 14-3.643 14-8.137s-6.268-8.137-14-8.137S2 17.506 2 22s6.268 8.137 14 8.137"/><path fill="url(#iVscicM)" d="M16 30.067c7.185 0 13.01-3.157 13.01-7.051s-5.825-7.05-13.01-7.05s-13.01 3.156-13.01 7.05s5.825 7.05 13.01 7.05"/><defs><radialGradient id="iimPJuj" cx="0" cy="0" r="1" gradientTransform="matrix(4.75001 -11.87503 12.18115 4.87246 23.25 15.613)" gradientUnits="userSpaceOnUse"><stop stopColor="#D8D1DF"/><stop offset=".989" stopColor="#90829F"/></radialGradient><radialGradient id="iVscicM" cx="0" cy="0" r="1" gradientTransform="matrix(9.74999 -19.62496 54.14327 26.89922 10.5 31.738)" gradientUnits="userSpaceOnUse"><stop offset=".006" stopColor="#37275E"/><stop offset="1"/></radialGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="url(#iimPJuj)" d="M16 30.137c7.732 0 14-3.643 14-8.137s-6.268-8.137-14-8.137S2 17.506 2 22s6.268 8.137 14 8.137"/><path fill="url(#iVscicM)" d="M16 30.067c7.185 0 13.01-3.157 13.01-7.051s-5.825-7.05-13.01-7.05s-13.01 3.156-13.01 7.05s5.825 7.05 13.01 7.05"/><defs><radialGradient id="iimPJuj" cx="0" cy="0" r="1" gradientTransform="matrix(4.75001 -11.87503 12.18115 4.87246 23.25 15.613)" gradientUnits="userSpaceOnUse"><stop stop-color="#D8D1DF"/><stop offset=".989" stop-color="#90829F"/></radialGradient><radialGradient id="iVscicM" cx="0" cy="0" r="1" gradientTransform="matrix(9.74999 -19.62496 54.14327 26.89922 10.5 31.738)" gradientUnits="userSpaceOnUse"><stop offset=".006" stop-color="#37275E"/><stop offset="1"/></radialGradient></defs></g></svg> </template>
CSS
.icon-hole {
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%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23iimPJuj)%22%20d%3D%22M16%2030.137c7.732%200%2014-3.643%2014-8.137s-6.268-8.137-14-8.137S2%2017.506%202%2022s6.268%208.137%2014%208.137%22%2F%3E%3Cpath%20fill%3D%22url(%23iVscicM)%22%20d%3D%22M16%2030.067c7.185%200%2013.01-3.157%2013.01-7.051s-5.825-7.05-13.01-7.05s-13.01%203.156-13.01%207.05s5.825%207.05%2013.01%207.05%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22iimPJuj%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(4.75001%20-11.87503%2012.18115%204.87246%2023.25%2015.613)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23D8D1DF%22%2F%3E%3Cstop%20offset%3D%22.989%22%20stop-color%3D%22%2390829F%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22iVscicM%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(9.74999%20-19.62496%2054.14327%2026.89922%2010.5%2031.738)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.006%22%20stop-color%3D%22%2337275E%22%2F%3E%3Cstop%20offset%3D%221%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23iimPJuj)%22%20d%3D%22M16%2030.137c7.732%200%2014-3.643%2014-8.137s-6.268-8.137-14-8.137S2%2017.506%202%2022s6.268%208.137%2014%208.137%22%2F%3E%3Cpath%20fill%3D%22url(%23iVscicM)%22%20d%3D%22M16%2030.067c7.185%200%2013.01-3.157%2013.01-7.051s-5.825-7.05-13.01-7.05s-13.01%203.156-13.01%207.05s5.825%207.05%2013.01%207.05%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22iimPJuj%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(4.75001%20-11.87503%2012.18115%204.87246%2023.25%2015.613)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23D8D1DF%22%2F%3E%3Cstop%20offset%3D%22.989%22%20stop-color%3D%22%2390829F%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22iVscicM%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(9.74999%20-19.62496%2054.14327%2026.89922%2010.5%2031.738)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.006%22%20stop-color%3D%22%2337275E%22%2F%3E%3Cstop%20offset%3D%221%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-emoji/hole.svg?color=%231a73e8&size=48
