What is the gift icon used for?

It's used to signify gifts, rewards, special offers, or celebratory events in a user interface.

How do I use the gift icon in React?

Import it using `import { GiftIcon } from '@heroicons/react/24/outline'` and then use it as a component: ` `.

Heroicons are distributed under the MIT license, allowing for free use in both personal and commercial projects.

Heroicons · gift · MIT

The Heroicons gift icon depicts a wrapped present and is commonly used to represent rewards, special offers, or celebratory events.

Install

npm i @heroicons/react

Import & render

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

<GiftIcon className="size-6" />

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

24/outline

<GiftIcon className="size-6" />

24/solid

<GiftIcon className="size-6" />

20/solid

<GiftIcon className="size-6" />

16/solid

<GiftIcon className="size-6" />

What is the gift icon used for?: It's used to signify gifts, rewards, special offers, or celebratory events in a user interface.
How do I use the gift icon in React?: Import it using `import { GiftIcon } from '@heroicons/react/24/outline'` and then use it as a component: `<GiftIcon className="h-6 w-6" />`.
What is the license for Heroicons?: Heroicons are distributed under the MIT license, allowing for free use in both personal and commercial projects.

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 →