Gentleface › Time & calendar › clock-start

clock-start icon

Clock start: start time, time range start. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6.501 12C5.801 12 5.126 11.871 4.475 11.614C3.769 11.334 3.148 10.926 2.611 10.389C2.074 9.852 1.666 9.231 1.386 8.525C1.129 7.874 1 7.199 1 6.5C1 5.801 1.129 5.126 1.386 4.475C1.666 3.769 2.074 3.148 2.611 2.611C3.148 2.074 3.769 1.666 4.475 1.386C5.126 1.129 5.801 1 6.5 1C7.199 1 7.874 1.129 8.525 1.386C9.231 1.666 9.852 2.074 10.389 2.611C10.926 3.148 11.334 3.769 11.614 4.475C11.871 5.126 12 5.801 12 6.5C12 7.086 11.909 7.656 11.727 8.21C11.639 8.265 11.555 8.329 11.475 8.404C11.465 8.414 11.453 8.426 11.439 8.439C11.426 8.453 11.413 8.466 11.4 8.48C11.131 8.766 10.997 9.106 10.997 9.5C10.997 9.553 10.999 9.605 11.004 9.657C10.925 9.77 10.84 9.881 10.752 9.989C10.749 9.993 10.745 9.996 10.742 10L10.5 10C10.342 10 10.193 10.021 10.053 10.063C10.051 10.061 10.05 10.06 10.048 10.059C10.031 10.044 10.015 10.03 10 10.015L10 9.328C10.32 8.933 10.565 8.495 10.737 8.016C10.912 7.526 11 7.021 11 6.5C11 5.928 10.895 5.376 10.684 4.844C10.455 4.266 10.121 3.757 9.682 3.318C9.243 2.879 8.734 2.545 8.156 2.316C7.624 2.105 7.072 2 6.5 2C5.928 2 5.376 2.105 4.844 2.316C4.266 2.545 3.757 2.879 3.318 3.318C2.879 3.757 2.545 4.266 2.316 4.844C2.105 5.376 2 5.928 2 6.5C2 7.072 2.105 7.624 2.316 8.156C2.545 8.734 2.879 9.243 3.318 9.682C3.757 10.121 4.266 10.455 4.844 10.684C5.376 10.895 5.927 11 6.499 11L6.525 11L6.526 11C6.664 10.999 6.782 11.047 6.881 11.144C6.936 11.199 6.976 11.26 7 11.327L7 11.677C6.977 11.742 6.939 11.801 6.887 11.854C6.791 11.95 6.673 11.999 6.532 12L6.531 12L6.528 12L6.516 12L6.515 12L6.501 12ZM6.5 7C6.359 7 6.241 6.952 6.144 6.856C6.048 6.759 6 6.641 6 6.5L6 3.5C6 3.359 6.048 3.241 6.144 3.144C6.241 3.048 6.359 3 6.5 3C6.641 3 6.759 3.048 6.856 3.144C6.952 3.241 7 3.359 7 3.5L7 6L8.5 6C8.641 6 8.759 6.048 8.856 6.144C8.952 6.241 9 6.359 9 6.5C9 6.641 8.952 6.759 8.856 6.856C8.759 6.952 8.641 7 8.5 7L6.5 7ZM8.5 8C8.641 8 8.759 8.048 8.856 8.144C8.952 8.241 9 8.359 9 8.5L9 14.5C9 14.641 8.952 14.759 8.856 14.856C8.759 14.952 8.641 15 8.5 15C8.359 15 8.241 14.952 8.144 14.856C8.048 14.759 8 14.641 8 14.5L8 8.5C8 8.359 8.048 8.241 8.144 8.144C8.241 8.048 8.359 8 8.5 8ZM14.854 11.854L12.854 13.854C12.754 13.953 12.636 14.003 12.5 14.003C12.364 14.003 12.246 13.953 12.146 13.854C12.047 13.754 11.997 13.636 11.997 13.5C11.997 13.364 12.047 13.246 12.146 13.146L13.293 12L10.5 12C10.359 12 10.241 11.952 10.144 11.856C10.048 11.759 10 11.641 10 11.5C10 11.359 10.048 11.241 10.144 11.144C10.241 11.048 10.359 11 10.5 11L13.293 11L12.146 9.854C12.047 9.754 11.997 9.636 11.997 9.5C11.997 9.364 12.047 9.246 12.146 9.146C12.246 9.047 12.364 8.997 12.5 8.997C12.636 8.997 12.754 9.047 12.854 9.146L14.854 11.146C14.953 11.246 15.003 11.364 15.003 11.5C15.003 11.636 14.953 11.754 14.854 11.854Z"/></svg>

React

// Gentleface "clock-start" (line-round), MIT. https://gentleface.com/icons/clock-start
import type { SVGProps } from 'react';

export function ClockStartIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M6.501 12C5.801 12 5.126 11.871 4.475 11.614C3.769 11.334 3.148 10.926 2.611 10.389C2.074 9.852 1.666 9.231 1.386 8.525C1.129 7.874 1 7.199 1 6.5C1 5.801 1.129 5.126 1.386 4.475C1.666 3.769 2.074 3.148 2.611 2.611C3.148 2.074 3.769 1.666 4.475 1.386C5.126 1.129 5.801 1 6.5 1C7.199 1 7.874 1.129 8.525 1.386C9.231 1.666 9.852 2.074 10.389 2.611C10.926 3.148 11.334 3.769 11.614 4.475C11.871 5.126 12 5.801 12 6.5C12 7.086 11.909 7.656 11.727 8.21C11.639 8.265 11.555 8.329 11.475 8.404C11.465 8.414 11.453 8.426 11.439 8.439C11.426 8.453 11.413 8.466 11.4 8.48C11.131 8.766 10.997 9.106 10.997 9.5C10.997 9.553 10.999 9.605 11.004 9.657C10.925 9.77 10.84 9.881 10.752 9.989C10.749 9.993 10.745 9.996 10.742 10L10.5 10C10.342 10 10.193 10.021 10.053 10.063C10.051 10.061 10.05 10.06 10.048 10.059C10.031 10.044 10.015 10.03 10 10.015L10 9.328C10.32 8.933 10.565 8.495 10.737 8.016C10.912 7.526 11 7.021 11 6.5C11 5.928 10.895 5.376 10.684 4.844C10.455 4.266 10.121 3.757 9.682 3.318C9.243 2.879 8.734 2.545 8.156 2.316C7.624 2.105 7.072 2 6.5 2C5.928 2 5.376 2.105 4.844 2.316C4.266 2.545 3.757 2.879 3.318 3.318C2.879 3.757 2.545 4.266 2.316 4.844C2.105 5.376 2 5.928 2 6.5C2 7.072 2.105 7.624 2.316 8.156C2.545 8.734 2.879 9.243 3.318 9.682C3.757 10.121 4.266 10.455 4.844 10.684C5.376 10.895 5.927 11 6.499 11L6.525 11L6.526 11C6.664 10.999 6.782 11.047 6.881 11.144C6.936 11.199 6.976 11.26 7 11.327L7 11.677C6.977 11.742 6.939 11.801 6.887 11.854C6.791 11.95 6.673 11.999 6.532 12L6.531 12L6.528 12L6.516 12L6.515 12L6.501 12ZM6.5 7C6.359 7 6.241 6.952 6.144 6.856C6.048 6.759 6 6.641 6 6.5L6 3.5C6 3.359 6.048 3.241 6.144 3.144C6.241 3.048 6.359 3 6.5 3C6.641 3 6.759 3.048 6.856 3.144C6.952 3.241 7 3.359 7 3.5L7 6L8.5 6C8.641 6 8.759 6.048 8.856 6.144C8.952 6.241 9 6.359 9 6.5C9 6.641 8.952 6.759 8.856 6.856C8.759 6.952 8.641 7 8.5 7L6.5 7ZM8.5 8C8.641 8 8.759 8.048 8.856 8.144C8.952 8.241 9 8.359 9 8.5L9 14.5C9 14.641 8.952 14.759 8.856 14.856C8.759 14.952 8.641 15 8.5 15C8.359 15 8.241 14.952 8.144 14.856C8.048 14.759 8 14.641 8 14.5L8 8.5C8 8.359 8.048 8.241 8.144 8.144C8.241 8.048 8.359 8 8.5 8ZM14.854 11.854L12.854 13.854C12.754 13.953 12.636 14.003 12.5 14.003C12.364 14.003 12.246 13.953 12.146 13.854C12.047 13.754 11.997 13.636 11.997 13.5C11.997 13.364 12.047 13.246 12.146 13.146L13.293 12L10.5 12C10.359 12 10.241 11.952 10.144 11.856C10.048 11.759 10 11.641 10 11.5C10 11.359 10.048 11.241 10.144 11.144C10.241 11.048 10.359 11 10.5 11L13.293 11L12.146 9.854C12.047 9.754 11.997 9.636 11.997 9.5C11.997 9.364 12.047 9.246 12.146 9.146C12.246 9.047 12.364 8.997 12.5 8.997C12.636 8.997 12.754 9.047 12.854 9.146L14.854 11.146C14.953 11.246 15.003 11.364 15.003 11.5C15.003 11.636 14.953 11.754 14.854 11.854Z" />
    </svg>
  );
}

Vue

Vue: see /icons/clock-start.md

Svelte

Svelte: see /icons/clock-start.md

HTML img

HTML img: see /icons/clock-start.md

CSS

CSS: see /icons/clock-start.md

Data URL

Data URL: see /icons/clock-start.md

Sprite

Sprite: see /icons/clock-start.md

SwiftUI

SwiftUI: see /icons/clock-start.md

Compose

Compose: see /icons/clock-start.md

Android XML

Android XML: see /icons/clock-start.md

Flutter

Flutter: see /icons/clock-start.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

start time, time range start

Tags

clock, start, start time, begin, from, time range, schedule, time

Category

Time & calendar

Component name

ClockStartIcon

History

2026-11-12 20 px drawn, 24 px drawn, added

Family 32

clock clock-alert clock-auto clock-bolt clock-check clock-diagonal clock-digital clock-duration clock-end clock-gear clock-minus clock-off

More time & calendar icons

alarm-clock alarm-clock-alert alarm-clock-check alarm-clock-gear alarm-clock-off alarm-clock-pause alarm-clock-pencil alarm-clock-plus alarm-clock-snooze alarm-clock-sparkle alarm-clock-x calendar calendar-alert calendar-arrow-down calendar-arrow-up calendar-bolt · all time & calendar icons

For agents

Metadata: /icons/clock-start.json · Markdown: /icons/clock-start.md · SVG: https://gentleface.com/svg/{style}/16/clock-start.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/clock-start.png

clock-start icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp