Check Icons

A plain checkmark works well inline — next to a completed list item, or inside a small checkbox. A circled version (check inside a circle, often green) reads more strongly as a standalone success or confirmation state, commonly used for things like 'payment successful' or 'form submitted' screens where more visual weight is appropriate.

Both patterns exist — a checkmark inside an outlined or filled box is the most common convention, since the mark itself clearly signals 'selected'. Some minimal designs use just a filled square without a checkmark, but this can be less clear at a glance, especially for accessibility, so the checkmark version is generally the safer default.

Green is a strong, widely understood convention for success or completion, but it's not strictly required — some interfaces use a neutral color (like the icon's default text color) for checkmarks in less critical contexts, such as a simple to-do list, reserving green specifically for more significant confirmations like a completed payment or successful account action.

A single check typically means 'done' or 'selected', while a double checkmark (two overlapping ticks) is a convention borrowed from messaging apps, usually meaning 'delivered' or 'read', separate from a basic completion status. Use double-check specifically if you're building a messaging-style read-receipt feature.

Each icon keeps the license from its source library attached to it, and terms can differ depending on which library a specific icon comes from. Check the license shown on the individual icon's page before using it commercially.

The icons on this page are static by default; a draw-in effect (the line appearing to trace itself) is typically achieved with an SVG stroke-dasharray animation applied via CSS, which works well on simple stroke-based checkmarks specifically.