The Heroicons envelope open icon depicts an unsealed envelope, commonly used to signify an inbox, new mail, or a contact form.
Common uses
- Inbox notification badge
- Link to contact page
- Email subscription button
Use it in React
Install
npm i @heroicons/reactImport & render
import { EnvelopeOpenIcon } from '@heroicons/react/24/outline';
<EnvelopeOpenIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<EnvelopeOpenIcon className="size-6" />24/solid
<EnvelopeOpenIcon className="size-6" />20/solid
<EnvelopeOpenIcon className="size-6" />16/solid
<EnvelopeOpenIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- envelopeopenmail openemail openinbox iconcontact icon
FAQ
- What does the envelope open icon represent?
- It represents an unsealed envelope, often used for actions or indicators related to mail or communication.
- How do I use this icon in React?
- Import it using `import { EnvelopeOpenIcon } from '@heroicons/react/24/outline'` and use it as a component.
- What is the license for Heroicons?
- Heroicons are available under the MIT license, allowing for free use.
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 →