What does the check badge icon represent?

It represents verification, approval, or a completed status, often used to highlight important achievements or confirmed states.

How do I use the check badge icon in React?

Import it from Heroicons and use it as a component: `import { CheckBadgeIcon } from '@heroicons/react/24/outline'; `.

The Heroicons check badge icon is available under the MIT license.

Heroicons · check-badge · MIT

The Heroicons check badge icon depicts a checkmark within a shield or badge, commonly used to signify verification, approval, or a completed status.

Install

npm i @heroicons/react

Import & render

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

<CheckBadgeIcon className="size-6" />

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

24/outline

<CheckBadgeIcon className="size-6" />

24/solid

<CheckBadgeIcon className="size-6" />

20/solid

<CheckBadgeIcon className="size-6" />

16/solid

<CheckBadgeIcon className="size-6" />

What does the check badge icon represent?: It represents verification, approval, or a completed status, often used to highlight important achievements or confirmed states.
How do I use the check badge icon in React?: Import it from Heroicons and use it as a component: `import { CheckBadgeIcon } from '@heroicons/react/24/outline'; <CheckBadgeIcon className="h-5 w-5" />`.
What is the license for this icon?: The Heroicons check badge 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 →