clock(time,watch,hour,minute) Vector Icon

Tailwind CSS UnoCSS Unplugin Icons Iconify React Vue Svelte Solid

HTML Tag: SEO / AccessibilityJSXSelf closing tag

With @iconify/tailwind: Installation Guide

      <span class="icon-[ei--clock]"></span>

With @egoist/tailwindcss-icons: Installation Guide

      <span class="i-ei-clock"></span>

HTML Tag: SEO / AccessibilityJSXSelf closing tag

      <span class="i-ei-clock"></span>

Installation Guide

Import component:

      import EiClock from '~icons/ei/clock'

Use component:

      <EiClock />

Installation Guide

Iconify Web Component：Installation Guide

      <iconify-icon icon="ei:clock"></iconify-icon>

Iconify URL：

      https://api.iconify.design/ei:clock.svg

With @iconify/react:

      <Icon icon="ei:clock" />

JSX:

      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 50 50"><path fill="currentColor" d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17s-7.6 17-17 17m0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15s15-6.7 15-15s-6.7-15-15-15"/><path fill="currentColor" d="M30.3 33.7L24 27.4V16h2v10.6l5.7 5.7z"/></svg>

Component:

      export function EiClock(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 50 50" {...props}><path fill="currentColor" d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17s-7.6 17-17 17m0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15s15-6.7 15-15s-6.7-15-15-15"/><path fill="currentColor" d="M30.3 33.7L24 27.4V16h2v10.6l5.7 5.7z"/></svg>
  )
}

With @iconify/vue:

      <Icon icon="ei:clock" />

With nuxt-icon:

      <Icon name="ei:clock" />

Component:

      <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 50 50"><path fill="currentColor" d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17s-7.6 17-17 17m0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15s15-6.7 15-15s-6.7-15-15-15"/><path fill="currentColor" d="M30.3 33.7L24 27.4V16h2v10.6l5.7 5.7z"/></svg>
</template>

<script>
export default {
  name: 'EiClock'
}
</script>

With @iconify/svelte:

      <Icon icon="ei:clock" />

Component:

      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 50 50"><path fill="currentColor" d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17s-7.6 17-17 17m0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15s15-6.7 15-15s-6.7-15-15-15"/><path fill="currentColor" d="M30.3 33.7L24 27.4V16h2v10.6l5.7 5.7z"/></svg>

Component:

      export function EiClock(props, key) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 50 50" {...props} key={key}><path fill="currentColor" d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17s-7.6 17-17 17m0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15s15-6.7 15-15s-6.7-15-15-15"/><path fill="currentColor" d="M30.3 33.7L24 27.4V16h2v10.6l5.7 5.7z"/></svg>
  )
}

StrongMe - Mindfulness journal

Capture every small win, cherish every beautiful moment, and share every joy of growth.