What is the check icon used for?

It signifies completion, success, or confirmation. Use it to show a task is done or a process was successful.

How do I use the check icon in React?

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

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

Heroicons · check · MIT

The Heroicons check icon depicts a checkmark, commonly used to indicate completion, success, or confirmation of an action.

Install

npm i @heroicons/react

Import & render

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

<CheckIcon className="size-6" />

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

24/outline

<CheckIcon className="size-6" />

24/solid

<CheckIcon className="size-6" />

20/solid

<CheckIcon className="size-6" />

16/solid

<CheckIcon className="size-6" />

What is the check icon used for?: It signifies completion, success, or confirmation. Use it to show a task is done or a process was successful.
How do I use the check icon in React?: Import it using `import { CheckIcon } from '@heroicons/react/24/outline'` and then render it as a component: `<CheckIcon 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.

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 →