goggles icon
goggles-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.
- Name
- goggles-thin
- Set
- Phosphor
- Style
- Thin
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
Use the goggles icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M252 136a68.07 68.07 0 0 0-68-68H72a68.07 68.07 0 0 0-68 68a20 20 0 0 0 16.35 19.65C23.91 174.84 54.81 188 72 188a36 36 0 0 0 35.77-32h40.46A36 36 0 0 0 184 188c17.19 0 48.09-13.16 51.65-32.35A20 20 0 0 0 252 136M28 152c0-7.75 7.92-15.25 17.81-20.53l43 42.95A27.9 27.9 0 0 1 72 180c-16.55 0-44-13.56-44-28m66.42 16.76l-40.84-40.84C60 125.46 66.58 124 72 124a28 28 0 0 1 22.42 44.76M156 152a27.94 27.94 0 0 1 9.42-20.92L208 173.65c-8 3.91-17 6.35-24 6.35a28 28 0 0 1-28-28m59.2 17.55l-42.95-43A27.9 27.9 0 0 1 184 124c16.55 0 44 13.56 44 28c0 6.39-5.38 12.6-12.8 17.55m20.26-22.06C231.15 128.77 200.93 116 184 116a36 36 0 0 0-35.77 32h-40.46A36 36 0 0 0 72 116c-16.93 0-47.15 12.77-51.46 31.49A12 12 0 0 1 12 136a60.07 60.07 0 0 1 60-60h112a60.07 60.07 0 0 1 60 60a12 12 0 0 1-8.54 11.49"/></svg>
React
import type { SVGProps } from "react";
export function PhGogglesThin(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M252 136a68.07 68.07 0 0 0-68-68H72a68.07 68.07 0 0 0-68 68a20 20 0 0 0 16.35 19.65C23.91 174.84 54.81 188 72 188a36 36 0 0 0 35.77-32h40.46A36 36 0 0 0 184 188c17.19 0 48.09-13.16 51.65-32.35A20 20 0 0 0 252 136M28 152c0-7.75 7.92-15.25 17.81-20.53l43 42.95A27.9 27.9 0 0 1 72 180c-16.55 0-44-13.56-44-28m66.42 16.76l-40.84-40.84C60 125.46 66.58 124 72 124a28 28 0 0 1 22.42 44.76M156 152a27.94 27.94 0 0 1 9.42-20.92L208 173.65c-8 3.91-17 6.35-24 6.35a28 28 0 0 1-28-28m59.2 17.55l-42.95-43A27.9 27.9 0 0 1 184 124c16.55 0 44 13.56 44 28c0 6.39-5.38 12.6-12.8 17.55m20.26-22.06C231.15 128.77 200.93 116 184 116a36 36 0 0 0-35.77 32h-40.46A36 36 0 0 0 72 116c-16.93 0-47.15 12.77-51.46 31.49A12 12 0 0 1 12 136a60.07 60.07 0 0 1 60-60h112a60.07 60.07 0 0 1 60 60a12 12 0 0 1-8.54 11.49"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M252 136a68.07 68.07 0 0 0-68-68H72a68.07 68.07 0 0 0-68 68a20 20 0 0 0 16.35 19.65C23.91 174.84 54.81 188 72 188a36 36 0 0 0 35.77-32h40.46A36 36 0 0 0 184 188c17.19 0 48.09-13.16 51.65-32.35A20 20 0 0 0 252 136M28 152c0-7.75 7.92-15.25 17.81-20.53l43 42.95A27.9 27.9 0 0 1 72 180c-16.55 0-44-13.56-44-28m66.42 16.76l-40.84-40.84C60 125.46 66.58 124 72 124a28 28 0 0 1 22.42 44.76M156 152a27.94 27.94 0 0 1 9.42-20.92L208 173.65c-8 3.91-17 6.35-24 6.35a28 28 0 0 1-28-28m59.2 17.55l-42.95-43A27.9 27.9 0 0 1 184 124c16.55 0 44 13.56 44 28c0 6.39-5.38 12.6-12.8 17.55m20.26-22.06C231.15 128.77 200.93 116 184 116a36 36 0 0 0-35.77 32h-40.46A36 36 0 0 0 72 116c-16.93 0-47.15 12.77-51.46 31.49A12 12 0 0 1 12 136a60.07 60.07 0 0 1 60-60h112a60.07 60.07 0 0 1 60 60a12 12 0 0 1-8.54 11.49"/></svg> </template>
CSS
.icon-goggles-thin {
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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M252%20136a68.07%2068.07%200%200%200-68-68H72a68.07%2068.07%200%200%200-68%2068a20%2020%200%200%200%2016.35%2019.65C23.91%20174.84%2054.81%20188%2072%20188a36%2036%200%200%200%2035.77-32h40.46A36%2036%200%200%200%20184%20188c17.19%200%2048.09-13.16%2051.65-32.35A20%2020%200%200%200%20252%20136M28%20152c0-7.75%207.92-15.25%2017.81-20.53l43%2042.95A27.9%2027.9%200%200%201%2072%20180c-16.55%200-44-13.56-44-28m66.42%2016.76l-40.84-40.84C60%20125.46%2066.58%20124%2072%20124a28%2028%200%200%201%2022.42%2044.76M156%20152a27.94%2027.94%200%200%201%209.42-20.92L208%20173.65c-8%203.91-17%206.35-24%206.35a28%2028%200%200%201-28-28m59.2%2017.55l-42.95-43A27.9%2027.9%200%200%201%20184%20124c16.55%200%2044%2013.56%2044%2028c0%206.39-5.38%2012.6-12.8%2017.55m20.26-22.06C231.15%20128.77%20200.93%20116%20184%20116a36%2036%200%200%200-35.77%2032h-40.46A36%2036%200%200%200%2072%20116c-16.93%200-47.15%2012.77-51.46%2031.49A12%2012%200%200%201%2012%20136a60.07%2060.07%200%200%201%2060-60h112a60.07%2060.07%200%200%201%2060%2060a12%2012%200%200%201-8.54%2011.49%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M252%20136a68.07%2068.07%200%200%200-68-68H72a68.07%2068.07%200%200%200-68%2068a20%2020%200%200%200%2016.35%2019.65C23.91%20174.84%2054.81%20188%2072%20188a36%2036%200%200%200%2035.77-32h40.46A36%2036%200%200%200%20184%20188c17.19%200%2048.09-13.16%2051.65-32.35A20%2020%200%200%200%20252%20136M28%20152c0-7.75%207.92-15.25%2017.81-20.53l43%2042.95A27.9%2027.9%200%200%201%2072%20180c-16.55%200-44-13.56-44-28m66.42%2016.76l-40.84-40.84C60%20125.46%2066.58%20124%2072%20124a28%2028%200%200%201%2022.42%2044.76M156%20152a27.94%2027.94%200%200%201%209.42-20.92L208%20173.65c-8%203.91-17%206.35-24%206.35a28%2028%200%200%201-28-28m59.2%2017.55l-42.95-43A27.9%2027.9%200%200%201%20184%20124c16.55%200%2044%2013.56%2044%2028c0%206.39-5.38%2012.6-12.8%2017.55m20.26-22.06C231.15%20128.77%20200.93%20116%20184%20116a36%2036%200%200%200-35.77%2032h-40.46A36%2036%200%200%200%2072%20116c-16.93%200-47.15%2012.77-51.46%2031.49A12%2012%200%200%201%2012%20136a60.07%2060.07%200%200%201%2060-60h112a60.07%2060.07%200%200%201%2060%2060a12%2012%200%200%201-8.54%2011.49%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/goggles-thin.svg?color=%231a73e8&size=48
