Browse icons

Live icon · Time · 20 styles · free

Clock showing a time live icon

An analogue clock whose hands show the exact time you choose; the hour hand moves with the minutes. Set it here, then download it or paste it anywhere.

10:10 · Round

Use it in code

Try an example

Set what it shows

Style Line clean outlines

Colour Style colours

On this page

Clock showing a time in all 20 styles

Same values, 20 personalities. Pick one to use it above.

For developersOne element or component with your settings: HTML, React or Vue

Install it with npm i @withicons/dynamic, or copy the HTML tab as is. The code follows everything you set above: values, style, colours and size.

48 px
HTML: any website
<script src="https://cdn.jsdelivr.net/npm/@withicons/dynamic@0.2.1/dist/cdn/lite.js"></script>

<with-live-icon name="clock-time" time="10:10" shape="round" size="48"></with-live-icon>
React
import { LiveIcon } from '@withicons/dynamic/react'

export function Example() {
  return <LiveIcon name="clock-time" time="10:10" shape="round" size={48} />
}
Vue
<script setup>
import { LiveIcon } from '@withicons/dynamic/vue'
</script>

<template>
  <LiveIcon name="clock-time" time="10:10" shape="round" :size="48" />
</template>

Add today and it shows the visitor’s own date and time, updated every minute: <with-live-icon name="clock-time" today>

What you can change

SettingWhat you can setDefaultAttribute
Time (HH:MM)TimeAny time, HH:MM (24-hour)10:10time
Clock shapeChoiceround, squareroundshape

Also called clock at time of day analog time set time clock hands time display wall clock time

Questions

How do I change the time on the clock showing a time icon?

Use the controls next to the preview. Time and Clock shape can all be changed, the icon redraws as you go, and the download uses exactly what you see.

Is the clock showing a time icon free?

Yes. It is free for personal and commercial use under the MIT license, in all 20 styles. No sign-up, no credit needed.

Can I use it in PowerPoint, Google Slides or Canva?

Yes. Download a PNG (see-through background), an SVG or a ready PowerPoint slide, then drag it into your slide or design. SVG stays sharp at any size.

How do I add it to a website?

Add the @withicons/dynamic script and write <with-live-icon name="clock-time"> with your values as attributes. React and Vue get a LiveIcon component.

Can it show today automatically?

Yes. On a website, add the today attribute: <with-live-icon name="clock-time" today> reads the visitor’s clock and updates every minute.

Clock showing a time studio

Outline colour