The Heroicons link icon visually represents a connection or a hyperlink, commonly used to indicate navigation to another page or resource.
Common uses
- External website navigation
- Copying a URL
- Linking to a specific section
Use it in React
Install
npm i @heroicons/reactImport & render
import { LinkIcon } from '@heroicons/react/24/outline';
<LinkIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<LinkIcon className="size-6" />24/solid
<LinkIcon className="size-6" />20/solid
<LinkIcon className="size-6" />16/solid
<LinkIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- linkchainurlanchorhyperlink
FAQ
- What does the link icon represent?
- It represents a hyperlink or connection. It's used to show users they can navigate to another location.
- How do I use the link icon in React?
- You can import it from Heroicons and use it like this: import { LinkIcon } from '@heroicons/react/24/outline'. Then render it as <LinkIcon 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.
Looking for something else? Search Heroicons and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →