Glasses icon

Use the Glasses icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { Glasses24Regular, Glasses24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Glasses24Regular aria-label="Glasses" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_glasses_24_regular.svg" width="24" height="24" alt="Glasses">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.90885 5H9.24945C9.66366 5 9.99945 5.33579 9.99945 5.75C9.99945 6.1297 9.71729 6.44349 9.35122 6.49315L9.24945 6.5H7.90885C7.7339 6.5 7.56563 6.5611 7.4322 6.67094L7.35655 6.74259L5.283 8.999L8.74883 8.99956C9.90849 8.99956 10.8632 9.87687 10.9856 11.004H13.0132C13.1356 9.87687 14.0903 8.99956 15.25 8.99956L18.727 8.999L16.6438 6.74141C16.5254 6.61317 16.3669 6.53102 16.1962 6.5072L16.0925 6.5H14.7467C14.3325 6.5 13.9967 6.16421 13.9967 5.75C13.9967 5.3703 14.2789 5.05651 14.645 5.00685L14.7467 5H16.0925C16.6579 5 17.2 5.21269 17.6133 5.59178L17.7462 5.72424L21.3881 9.67141C21.4384 9.72588 21.479 9.78579 21.5101 9.84906C21.816 10.2334 21.9988 10.7201 21.9988 11.2496V14.7461C21.9988 16.541 20.5438 17.9961 18.7488 17.9961H16.25C14.4551 17.9961 13 16.541 13 14.7461L12.999 12.504H10.998L10.9988 14.7461C10.9988 16.541 9.54376 17.9961 7.74883 17.9961H5.25C3.45507 17.9961 2 16.541 2 14.7461V11.2496C2 10.6879 2.20576 10.1744 2.54602 9.78017L2.58382 9.72499L2.6277 9.67259L6.25196 5.72776C6.63545 5.31035 7.16059 5.05479 7.72092 5.00785L7.90885 5H9.24945H7.90885ZM8.74883 10.4996H4.25C3.83579 10.4996 3.5 10.8353 3.5 11.2496V14.7461C3.5 15.7126 4.2835 16.4961 5.25 16.4961H7.74883C8.71533 16.4961 9.49883 15.7126 9.49883 14.7461V11.2496C9.49883 10.8353 9.16305 10.4996 8.74883 10.4996ZM19.7488 10.4996H15.25C14.8358 10.4996 14.5 10.8353 14.5 11.2496V14.7461C14.5 15.7126 15.2835 16.4961 16.25 16.4961H18.7488C19.7153 16.4961 20.4988 15.7126 20.4988 14.7461V11.2496C20.4988 10.8353 20.163 10.4996 19.7488 10.4996Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/glasses_24_regular.svg";

Details

Keywords

viewvisionmedical