Gentleface › Time & calendar › clock-end

clock-end icon

Clock end: end time, time range end. 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 6.942 11.948 7.377 11.843 7.806C11.81 7.94 11.735 8.043 11.617 8.114C11.499 8.186 11.372 8.206 11.238 8.173C11.211 8.166 11.185 8.158 11.161 8.148C11.145 8.14 11.129 8.132 11.113 8.125C11.038 8.084 10.977 8.025 10.93 7.947C10.858 7.829 10.839 7.703 10.871 7.568C10.957 7.217 11 6.861 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.941 11.204 6.983 11.272 7.007 11.347C7.002 11.397 7 11.448 7 11.5C7 11.553 7.002 11.605 7.007 11.655C6.984 11.729 6.944 11.795 6.887 11.854C6.791 11.95 6.673 11.999 6.532 12L6.531 12L6.528 12L6.516 12L6.515 12L6.501 12ZM8.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 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 6ZM14.856 8.144C14.952 8.241 15 8.359 15 8.5L15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15C14.359 15 14.241 14.952 14.144 14.856C14.048 14.759 14 14.641 14 14.5L14 8.5C14 8.359 14.048 8.241 14.144 8.144C14.241 8.048 14.359 8 14.5 8C14.641 8 14.759 8.048 14.856 8.144ZM10.5 14.003C10.364 14.003 10.246 13.953 10.146 13.854C10.047 13.754 9.997 13.636 9.997 13.5C9.997 13.364 10.047 13.246 10.146 13.146L11.293 12L8.5 12C8.359 12 8.241 11.952 8.144 11.856C8.048 11.759 8 11.641 8 11.5C8 11.359 8.048 11.241 8.144 11.144C8.241 11.048 8.359 11 8.5 11L11.293 11L10.146 9.854C10.047 9.754 9.997 9.636 9.997 9.5C9.997 9.364 10.047 9.246 10.146 9.146C10.246 9.047 10.364 8.997 10.5 8.997C10.636 8.997 10.754 9.047 10.854 9.146L12.854 11.146C12.953 11.246 13.003 11.364 13.003 11.5C13.003 11.636 12.953 11.754 12.854 11.854L10.854 13.854C10.754 13.953 10.636 14.003 10.5 14.003Z"/></svg>

React

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

export function ClockEndIcon(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 6.942 11.948 7.377 11.843 7.806C11.81 7.94 11.735 8.043 11.617 8.114C11.499 8.186 11.372 8.206 11.238 8.173C11.211 8.166 11.185 8.158 11.161 8.148C11.145 8.14 11.129 8.132 11.113 8.125C11.038 8.084 10.977 8.025 10.93 7.947C10.858 7.829 10.839 7.703 10.871 7.568C10.957 7.217 11 6.861 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.941 11.204 6.983 11.272 7.007 11.347C7.002 11.397 7 11.448 7 11.5C7 11.553 7.002 11.605 7.007 11.655C6.984 11.729 6.944 11.795 6.887 11.854C6.791 11.95 6.673 11.999 6.532 12L6.531 12L6.528 12L6.516 12L6.515 12L6.501 12ZM8.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 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 6ZM14.856 8.144C14.952 8.241 15 8.359 15 8.5L15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15C14.359 15 14.241 14.952 14.144 14.856C14.048 14.759 14 14.641 14 14.5L14 8.5C14 8.359 14.048 8.241 14.144 8.144C14.241 8.048 14.359 8 14.5 8C14.641 8 14.759 8.048 14.856 8.144ZM10.5 14.003C10.364 14.003 10.246 13.953 10.146 13.854C10.047 13.754 9.997 13.636 9.997 13.5C9.997 13.364 10.047 13.246 10.146 13.146L11.293 12L8.5 12C8.359 12 8.241 11.952 8.144 11.856C8.048 11.759 8 11.641 8 11.5C8 11.359 8.048 11.241 8.144 11.144C8.241 11.048 8.359 11 8.5 11L11.293 11L10.146 9.854C10.047 9.754 9.997 9.636 9.997 9.5C9.997 9.364 10.047 9.246 10.146 9.146C10.246 9.047 10.364 8.997 10.5 8.997C10.636 8.997 10.754 9.047 10.854 9.146L12.854 11.146C12.953 11.246 13.003 11.364 13.003 11.5C13.003 11.636 12.953 11.754 12.854 11.854L10.854 13.854C10.754 13.953 10.636 14.003 10.5 14.003Z" />
    </svg>
  );
}

Vue

Vue: see /icons/clock-end.md

Svelte

Svelte: see /icons/clock-end.md

HTML img

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

CSS

CSS: see /icons/clock-end.md

Data URL

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

Sprite

Sprite: see /icons/clock-end.md

SwiftUI

SwiftUI: see /icons/clock-end.md

Compose

Compose: see /icons/clock-end.md

Android XML

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

Flutter

Flutter: see /icons/clock-end.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

end time, time range end

Tags

clock, end, end time, finish, time range, until, schedule, time

Category

Time & calendar

Component name

ClockEndIcon

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-gear clock-minus clock-off clock-pause

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-end.json · Markdown: /icons/clock-end.md · SVG: https://gentleface.com/svg/{style}/16/clock-end.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/clock-end.png

clock-end icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp