Question 1

How do I use this icon in React, Vue, or Svelte?

Accepted Answer

Copy ready-to-use component code for React, Vue, Svelte, or raw SVG

Question 2

How do I download this icon in different formats?

Accepted Answer

Download the icon in SVG, PNG, WebP, JPEG, or ICO formats

Question 3

What is the license for this icon?

Accepted Answer

This icon is licensed under ISC

Question 4

Where is this icon commonly used?

Accepted Answer

Users encounter this symbol in booking platforms like Airbnb when marking properties as unavailable and in delivery apps such as Grubhub when indicating restaurants that cannot fulfill orders to specific locations. Project management tools including Asana use this icon for marking project sites as inaccessible, while customer service platforms like Zendesk employ it for indicating locations where support services are temporarily unavailable.

Question 5

What does this icon communicate to users?

Accepted Answer

From a status perspective, the internal X communicates more than simple rejection - it specifically indicates location invalidation, temporary unavailability, and the distinction between permanently removing location data versus marking it as currently unusable or restricted. This approach maintains location context while providing clear status indication of access limitations.

Question 6

How do I implement this icon?

Accepted Answer

This icon works naturally in location status components where it represents unavailability and access restriction controls. Combine it with shadcn/ui's Badge components for status indicators or Tooltip components for explaining location restrictions. The embedded X should use warning colors like text-amber-500 when indicating restricted locations to communicate temporary unavailability rather than permanent removal.

Map Pin X Inside Icon

Install with shadcn CLI

Frequently Asked Questions

Similar Icons