Clock 20 Solid icon

Source artwork and implementation

A clock can mark a time, duration, opening hours, or history. These concepts overlap visually but need different labels.

Use it in an interface

Write the actual time or duration beside the symbol. Include a timezone or location where it affects interpretation.

The heroicons:clock-20-solid source has 1 SVG path element and a 20 × 20 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=clock-20-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 Clock 20 Solid at the actual display size, especially if your output differs from its 20 × 20 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.