Menu

Beta
Sign in
Clock SVG icon, rounded

Clock SVG icon, rounded

A clock face indicates time, timing, or scheduled activity. Place it beside opening hours on a website or near an appointment detail in a mobile app.

Free · from Rounded Interface Icons

Similar SVGs

More from Rounded Interface Icons

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/_22PhQ-PXG7g/amnt.svg" alt="Clock" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><g id="layer-1" data-name="Circle 1"><path d="M53 32C53 43.6 43.6 53 32 53C20.4 53 11 43.6 11 32C11 20.4 20.4 11 32 11C43.6 11 53 20.4 53 32Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-2" data-name="Group 2"><path d="M32 16L32 19M48 32L45 32M32 48L32 45M16 32L19 32" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M32 23L32 32L40 37" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.clock {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/_22PhQ-PXG7g/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.clock {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/_22PhQ-PXG7g/amnt.svg") center / contain no-repeat;
}
React
import ClockSvg from "./clock.jsx"; // from the React tab above

<ClockSvg width={48} height={48} />

Tags

clocktimeschedulehours

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Clock. Flat, rounded icons in a consistent set. Use two colours and clean 2 px lines with rounded ends and corners. Keep the shapes simple, balanced, and easy to recognise at small sizes. Use the same proportions, line weight, and colour placement for every icon. as part of the pack Rounded Interface Icons. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings