check icon

Code line-round

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M5.5 10.793L12.146 4.146C12.246 4.047 12.364 3.997 12.5 3.997C12.636 3.997 12.754 4.047 12.854 4.146C12.951 4.244 13 4.362 13 4.5C13 4.638 12.951 4.756 12.854 4.854L5.854 11.854C5.754 11.953 5.636 12.003 5.5 12.003C5.364 12.003 5.246 11.953 5.146 11.854L2.146 8.854C2.047 8.754 1.997 8.636 1.997 8.5C1.997 8.364 2.047 8.246 2.146 8.146C2.244 8.049 2.362 8 2.5 8C2.638 8 2.756 8.049 2.854 8.146L5.5 10.793Z"/></svg>

// Gentleface "check" (line-round), MIT. https://gentleface.com/icons/check
import type { SVGProps } from 'react';

export function CheckIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M5.5 10.793L12.146 4.146C12.246 4.047 12.364 3.997 12.5 3.997C12.636 3.997 12.754 4.047 12.854 4.146C12.951 4.244 13 4.362 13 4.5C13 4.638 12.951 4.756 12.854 4.854L5.854 11.854C5.754 11.953 5.636 12.003 5.5 12.003C5.364 12.003 5.246 11.953 5.146 11.854L2.146 8.854C2.047 8.754 1.997 8.636 1.997 8.5C1.997 8.364 2.047 8.246 2.146 8.146C2.244 8.049 2.362 8 2.5 8C2.638 8 2.756 8.049 2.854 8.146L5.5 10.793Z" />
    </svg>
  );
}

Vue: see /icons/check.md

Svelte: see /icons/check.md

HTML img: see /icons/check.md

CSS: see /icons/check.md

Data URL: see /icons/check.md

Sprite: see /icons/check.md

SwiftUI: see /icons/check.md

Compose: see /icons/check.md

Android XML: see /icons/check.md

Flutter: see /icons/check.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

done, confirm, ok, selected, mark as done, mark complete, apply, accept

Alternatives

• check-circle: a success or completed status that reads alone
• check-double: all items done, or a message read
• checkbox: a checkbox the user toggles in a list or form

Don’t confuse with

• thumbs-up: thumbs-up means approve or like as feedback, not confirm a dialog

Also fits

• all done: a single item done
• task complete: mark done on a task row, where the list already names the task
• copied: a bare check that replaces the copy icon in a tight button
• success: a bare check inline, e.g. done on a list row
• approve: approve a request or a review step

Not for

• checkbox (use checkbox): check means done or approved, never selected
• finish line (use flag-checkered): finish = done or complete is a plain check
• checklist (use checklist): a bare check means done; a checklist is a list with check bullets

Tags

tick, success

Category

Actions

Component name

CheckIcon

History

• 2026-10-13 added
• 2026-10-14 20 px drawn, 24 px drawn

Family 1

More actions icons

arrow-down-a-z ban bolt bolt-off clipboard clipboard-alert clipboard-check clipboard-clock clipboard-list clipboard-off clipboard-pencil clipboard-plus clipboard-search clipboard-user clipboard-x compare · all actions icons

For agents

Metadata: /icons/check.json · Markdown: /icons/check.md · SVG: https://gentleface.com/svg/{style}/16/check.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/check.png