What does the envelope icon represent?

It represents an envelope, typically used for email, mail, or messaging features in an application.

How do I use the envelope icon in React?

You can import and use it like this: import { EnvelopeIcon } from '@heroicons/react/24/outline'. Then render it as .

The Heroicons library, including the envelope icon, is available under the MIT license.

Heroicons · envelope · MIT

The Heroicons envelope icon depicts a standard envelope, commonly used to represent email, messaging, or contact functions within a user interface.

Install

npm i @heroicons/react

Import & render

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

<EnvelopeIcon className="size-6" />

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

24/outline

<EnvelopeIcon className="size-6" />

24/solid

<EnvelopeIcon className="size-6" />

20/solid

<EnvelopeIcon className="size-6" />

16/solid

<EnvelopeIcon className="size-6" />

What does the envelope icon represent?: It represents an envelope, typically used for email, mail, or messaging features in an application.
How do I use the envelope icon in React?: You can import and use it like this: import { EnvelopeIcon } from '@heroicons/react/24/outline'. Then render it as <EnvelopeIcon className="h-6 w-6" />.
What is the license for the Heroicons envelope icon?: The Heroicons library, including the envelope icon, is available under the MIT license.

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

The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →