map icon

Common uses

• Displaying a user's current location on a map.
• Linking to a page with a map view or directions.
• Indicating a feature related to geographical search or points of interest.

Use it in React

npm i @heroicons/react

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

<MapIcon className="size-6" />

Styles

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

<MapIcon className="size-6" />

<MapIcon className="size-6" />

<MapIcon className="size-6" />

<MapIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

maplocationglobenavigationpin

FAQ

What is the Heroicons map icon used for?

It visually represents maps, locations, or geographical data, often used for navigation or location-specific features in UIs.

How do I use the map icon in React?

Import it using `import { MapIcon } from '@heroicons/react/24/outline'` and then use it as a component: `<MapIcon className="h-6 w-6" />`.

What is the license for Heroicons?

Heroicons are provided 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.