goggles icon

goggles-fill from Phosphor by Phosphor Icons · Fill · MIT Free for personal and commercial use.

Name
goggles-fill
Set
Phosphor
Style
Fill
Viewbox
256×256
License
MIT

5 other variants in Phosphor

gogglesgoggles-boldgoggles-duotonegoggles-lightgoggles-thin

The same icon in other sets

gogglesFluent EmojigogglesFluent Emoji FlatgogglesFluent Emoji High ContrastgogglesNoto EmojigogglesOpenMojigoggles-fillRemix IcongogglesTwitter Emoji

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="M184 64H72a72.08 72.08 0 0 0-72 72a24.06 24.06 0 0 0 17 23c6.06 20.37 37.63 33 55 33a40.07 40.07 0 0 0 39.2-32h33.6a40.07 40.07 0 0 0 39.2 32c17.33 0 48.9-12.66 55-33a24.06 24.06 0 0 0 17-23a72.08 72.08 0 0 0-72-72M89 169a8 8 0 0 1-11.31 0l-24.55-24.55a8 8 0 0 1 11.31-11.31L89 157.65A8 8 0 0 1 89 169m119.52-.49a8 8 0 0 1-11.31 0l-25.41-25.4a8 8 0 0 1 11.32-11.32l25.4 25.41a8 8 0 0 1-.04 11.28Zm29.2-26.86C229.34 123.25 200.34 112 184 112a40.07 40.07 0 0 0-39.2 32h-33.6A40.07 40.07 0 0 0 72 112c-16.34 0-45.34 11.25-53.68 29.62A8 8 0 0 1 16 136a56.06 56.06 0 0 1 56-56h112a56.06 56.06 0 0 1 56 56a8 8 0 0 1-2.32 5.62Z"/></svg>

React

import type { SVGProps } from "react";

export function PhGogglesFill(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="M184 64H72a72.08 72.08 0 0 0-72 72a24.06 24.06 0 0 0 17 23c6.06 20.37 37.63 33 55 33a40.07 40.07 0 0 0 39.2-32h33.6a40.07 40.07 0 0 0 39.2 32c17.33 0 48.9-12.66 55-33a24.06 24.06 0 0 0 17-23a72.08 72.08 0 0 0-72-72M89 169a8 8 0 0 1-11.31 0l-24.55-24.55a8 8 0 0 1 11.31-11.31L89 157.65A8 8 0 0 1 89 169m119.52-.49a8 8 0 0 1-11.31 0l-25.41-25.4a8 8 0 0 1 11.32-11.32l25.4 25.41a8 8 0 0 1-.04 11.28Zm29.2-26.86C229.34 123.25 200.34 112 184 112a40.07 40.07 0 0 0-39.2 32h-33.6A40.07 40.07 0 0 0 72 112c-16.34 0-45.34 11.25-53.68 29.62A8 8 0 0 1 16 136a56.06 56.06 0 0 1 56-56h112a56.06 56.06 0 0 1 56 56a8 8 0 0 1-2.32 5.62Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M184 64H72a72.08 72.08 0 0 0-72 72a24.06 24.06 0 0 0 17 23c6.06 20.37 37.63 33 55 33a40.07 40.07 0 0 0 39.2-32h33.6a40.07 40.07 0 0 0 39.2 32c17.33 0 48.9-12.66 55-33a24.06 24.06 0 0 0 17-23a72.08 72.08 0 0 0-72-72M89 169a8 8 0 0 1-11.31 0l-24.55-24.55a8 8 0 0 1 11.31-11.31L89 157.65A8 8 0 0 1 89 169m119.52-.49a8 8 0 0 1-11.31 0l-25.41-25.4a8 8 0 0 1 11.32-11.32l25.4 25.41a8 8 0 0 1-.04 11.28Zm29.2-26.86C229.34 123.25 200.34 112 184 112a40.07 40.07 0 0 0-39.2 32h-33.6A40.07 40.07 0 0 0 72 112c-16.34 0-45.34 11.25-53.68 29.62A8 8 0 0 1 16 136a56.06 56.06 0 0 1 56-56h112a56.06 56.06 0 0 1 56 56a8 8 0 0 1-2.32 5.62Z"/></svg>
</template>

CSS

.icon-goggles-fill {
  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%22M184%2064H72a72.08%2072.08%200%200%200-72%2072a24.06%2024.06%200%200%200%2017%2023c6.06%2020.37%2037.63%2033%2055%2033a40.07%2040.07%200%200%200%2039.2-32h33.6a40.07%2040.07%200%200%200%2039.2%2032c17.33%200%2048.9-12.66%2055-33a24.06%2024.06%200%200%200%2017-23a72.08%2072.08%200%200%200-72-72M89%20169a8%208%200%200%201-11.31%200l-24.55-24.55a8%208%200%200%201%2011.31-11.31L89%20157.65A8%208%200%200%201%2089%20169m119.52-.49a8%208%200%200%201-11.31%200l-25.41-25.4a8%208%200%200%201%2011.32-11.32l25.4%2025.41a8%208%200%200%201-.04%2011.28Zm29.2-26.86C229.34%20123.25%20200.34%20112%20184%20112a40.07%2040.07%200%200%200-39.2%2032h-33.6A40.07%2040.07%200%200%200%2072%20112c-16.34%200-45.34%2011.25-53.68%2029.62A8%208%200%200%201%2016%20136a56.06%2056.06%200%200%201%2056-56h112a56.06%2056.06%200%200%201%2056%2056a8%208%200%200%201-2.32%205.62Z%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%22M184%2064H72a72.08%2072.08%200%200%200-72%2072a24.06%2024.06%200%200%200%2017%2023c6.06%2020.37%2037.63%2033%2055%2033a40.07%2040.07%200%200%200%2039.2-32h33.6a40.07%2040.07%200%200%200%2039.2%2032c17.33%200%2048.9-12.66%2055-33a24.06%2024.06%200%200%200%2017-23a72.08%2072.08%200%200%200-72-72M89%20169a8%208%200%200%201-11.31%200l-24.55-24.55a8%208%200%200%201%2011.31-11.31L89%20157.65A8%208%200%200%201%2089%20169m119.52-.49a8%208%200%200%201-11.31%200l-25.41-25.4a8%208%200%200%201%2011.32-11.32l25.4%2025.41a8%208%200%200%201-.04%2011.28Zm29.2-26.86C229.34%20123.25%20200.34%20112%20184%20112a40.07%2040.07%200%200%200-39.2%2032h-33.6A40.07%2040.07%200%200%200%2072%20112c-16.34%200-45.34%2011.25-53.68%2029.62A8%208%200%200%201%2016%20136a56.06%2056.06%200%200%201%2056-56h112a56.06%2056.06%200%200%201%2056%2056a8%208%200%200%201-2.32%205.62Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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