magnifying glass icon

Common uses

• Search input field
• Global search button
• Advanced search filter

Use it in React

npm i @heroicons/react

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';

<MagnifyingGlassIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<MagnifyingGlassIcon className="size-6" />

<MagnifyingGlassIcon className="size-6" />

<MagnifyingGlassIcon className="size-6" />

<MagnifyingGlassIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

magnifyingglasssearchfindlookupmagnifier

FAQ

What is the magnifying glass icon used for?

It's a universal symbol for search. Use it to denote search functionality, like a search bar or a button to trigger a search.

How do I use the magnifying glass icon in React?

Import it from the Heroicons library like this: `import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'`. Then use it as a React component: `<MagnifyingGlassIcon className="h-6 w-6" />`.

What is the license for Heroicons?

Heroicons are distributed under the MIT license, allowing for free use in both personal and commercial projects.

Related icons

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