What is the magnifying glass icon used for?

It's commonly used to indicate search, find, or inspection features within an application.

How do I use the magnifying glass icon in React?

Import it from the Phosphor library: `import { MagnifyingGlass } from '@phosphor-icons/react'` and use it as a component.

The Phosphor icon set, including the magnifying glass, is available under the MIT license.

Phosphor · magnifying-glass · MIT

The Phosphor magnifying glass icon depicts a classic magnifying lens used to represent search, find, or inspect functionality in user interfaces.

Install

npm i @phosphor-icons/react

Import & render

import { MagnifyingGlass } from '@phosphor-icons/react';

<MagnifyingGlass size={24} />

Phosphor ships this icon in 6 styles — each its own import:

regular

<MagnifyingGlass size={24} />

thin

<MagnifyingGlass size={24} weight="thin" />

light

<MagnifyingGlass size={24} weight="light" />

bold

<MagnifyingGlass size={24} weight="bold" />

fill

<MagnifyingGlass size={24} weight="fill" />

duotone

<MagnifyingGlass size={24} weight="duotone" />

Library: Phosphor (1,512 icons)
License: MIT
viewBox: 0 0 256 256
Category: editor
Keywords: searchfindlocatequeryinspecteditorsystemmagnifyingglasssearch iconfind iconquery iconmagnifier

What is the magnifying glass icon used for?: It's commonly used to indicate search, find, or inspection features within an application.
How do I use the magnifying glass icon in React?: Import it from the Phosphor library: `import { MagnifyingGlass } from '@phosphor-icons/react'` and use it as a component.
What is the license for this icon?: The Phosphor icon set, including the magnifying glass, is available under the MIT license.

The same idea in other libraries, and near matches in Phosphor.

The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →