mask icon
mask from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.
- Name
- mask
- Set
- Huge Icons
- Style
- Stroke
- Viewbox
- 24×24
- License
- MIT
The same icon in other sets
Related icons in Huge Icons
Use the mask 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-width="1.5"><path d="M6 9c1.466-.613 3.61-1 6-1s4.534.387 6 1m-9 2.5c.94-.324 1.95-.5 3-.5s2.06.176 3 .5M8 15c1.177.636 2.543 1 4 1a8.4 8.4 0 0 0 4-1"/><path stroke-linejoin="round" d="M6 10c0 3.257-1.831 4.942-2.943 4.999a.09.09 0 0 1-.086-.05C2.157 13.498 2 11.789 2 10c0-3.314.895-6 2-6s2 2.686 2 6m12 0c0 3.257 1.831 4.942 2.943 4.999a.09.09 0 0 0 .086-.05c.814-1.451.971-3.16.971-4.949c0-3.314-.895-6-2-6s-2 2.686-2 6"/><path d="M21 15c-1.797 2.989-5.154 5-9 5s-7.204-2.011-9-5"/></g></svg>
React
import type { SVGProps } from "react";
export function HugeiconsMask(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" strokeWidth="1.5"><path d="M6 9c1.466-.613 3.61-1 6-1s4.534.387 6 1m-9 2.5c.94-.324 1.95-.5 3-.5s2.06.176 3 .5M8 15c1.177.636 2.543 1 4 1a8.4 8.4 0 0 0 4-1"/><path strokeLinejoin="round" d="M6 10c0 3.257-1.831 4.942-2.943 4.999a.09.09 0 0 1-.086-.05C2.157 13.498 2 11.789 2 10c0-3.314.895-6 2-6s2 2.686 2 6m12 0c0 3.257 1.831 4.942 2.943 4.999a.09.09 0 0 0 .086-.05c.814-1.451.971-3.16.971-4.949c0-3.314-.895-6-2-6s-2 2.686-2 6"/><path d="M21 15c-1.797 2.989-5.154 5-9 5s-7.204-2.011-9-5"/></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-width="1.5"><path d="M6 9c1.466-.613 3.61-1 6-1s4.534.387 6 1m-9 2.5c.94-.324 1.95-.5 3-.5s2.06.176 3 .5M8 15c1.177.636 2.543 1 4 1a8.4 8.4 0 0 0 4-1"/><path stroke-linejoin="round" d="M6 10c0 3.257-1.831 4.942-2.943 4.999a.09.09 0 0 1-.086-.05C2.157 13.498 2 11.789 2 10c0-3.314.895-6 2-6s2 2.686 2 6m12 0c0 3.257 1.831 4.942 2.943 4.999a.09.09 0 0 0 .086-.05c.814-1.451.971-3.16.971-4.949c0-3.314-.895-6-2-6s-2 2.686-2 6"/><path d="M21 15c-1.797 2.989-5.154 5-9 5s-7.204-2.011-9-5"/></g></svg> </template>
CSS
.icon-mask {
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-width%3D%221.5%22%3E%3Cpath%20d%3D%22M6%209c1.466-.613%203.61-1%206-1s4.534.387%206%201m-9%202.5c.94-.324%201.95-.5%203-.5s2.06.176%203%20.5M8%2015c1.177.636%202.543%201%204%201a8.4%208.4%200%200%200%204-1%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M6%2010c0%203.257-1.831%204.942-2.943%204.999a.09.09%200%200%201-.086-.05C2.157%2013.498%202%2011.789%202%2010c0-3.314.895-6%202-6s2%202.686%202%206m12%200c0%203.257%201.831%204.942%202.943%204.999a.09.09%200%200%200%20.086-.05c.814-1.451.971-3.16.971-4.949c0-3.314-.895-6-2-6s-2%202.686-2%206%22%2F%3E%3Cpath%20d%3D%22M21%2015c-1.797%202.989-5.154%205-9%205s-7.204-2.011-9-5%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-width%3D%221.5%22%3E%3Cpath%20d%3D%22M6%209c1.466-.613%203.61-1%206-1s4.534.387%206%201m-9%202.5c.94-.324%201.95-.5%203-.5s2.06.176%203%20.5M8%2015c1.177.636%202.543%201%204%201a8.4%208.4%200%200%200%204-1%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M6%2010c0%203.257-1.831%204.942-2.943%204.999a.09.09%200%200%201-.086-.05C2.157%2013.498%202%2011.789%202%2010c0-3.314.895-6%202-6s2%202.686%202%206m12%200c0%203.257%201.831%204.942%202.943%204.999a.09.09%200%200%200%20.086-.05c.814-1.451.971-3.16.971-4.949c0-3.314-.895-6-2-6s-2%202.686-2%206%22%2F%3E%3Cpath%20d%3D%22M21%2015c-1.797%202.989-5.154%205-9%205s-7.204-2.011-9-5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/mask.svg?color=%231a73e8&size=48
