quikoraSource artwork and implementation
A check mark communicates completion, selection, or successful validation. It should appear only after the corresponding operation actually succeeds.
Use it in an interface
Keep confirmation wording close to the icon. Do not show a success state before the server confirms that the data was saved.
The heroicons:check-16-solid source has 1 SVG path element and a 16 × 16 coordinate system. Its source does not declare a stroke attribute in the drawing markup; do not assume adding a stroke will preserve its appearance. The preview preserves the source proportions.
Embed the original SVG as an image
This example reserves a 24-pixel box. It uses an empty alternative because visible text must convey the meaning alongside a decorative icon. For an informative standalone image, replace the empty alternative with a useful description.
<img src="/icon-file.php?prefix=heroicons&name=check-16-solid" width="24" height="24" alt="">An SVG loaded through an image element does not inherit the surrounding page’s CSS color. To recolor it, export a customized version or use a reviewed inline SVG. Compare inline SVG and image coloring.
Check before shipping
- Preview Check 16 Solid at the actual display size, especially if your output differs from its 16 × 16 source grid.
- Give interactive controls an action label rather than relying on the file name.
- Retain the MIT license notices required by the original source terms.
Try our visual implementation examples for buttons, sizing and selected states.