Gentleface › Time & calendar › calendar-dot

calendar-dot icon

Calendar dot: new invitation, unread event, new event invite. 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="M9.856 2.144C9.952 2.241 10 2.359 10 2.5C10 2.641 9.952 2.759 9.856 2.856C9.759 2.952 9.641 3 9.5 3L6 3L6 3.5C6 3.641 5.952 3.759 5.856 3.856C5.759 3.952 5.641 4 5.5 4C5.359 4 5.241 3.952 5.144 3.856C5.048 3.759 5 3.641 5 3.5L5 3L4 3C3.724 3 3.488 3.098 3.293 3.293C3.098 3.488 3 3.724 3 4L3 5L10.5 5C10.641 5 10.759 5.048 10.856 5.144C10.952 5.241 11 5.359 11 5.5C11 5.641 10.952 5.759 10.856 5.856C10.759 5.952 10.641 6 10.5 6L3 6L3 13C3 13.276 3.098 13.512 3.293 13.707C3.488 13.902 3.724 14 4 14L12 14C12.276 14 12.512 13.902 12.707 13.707C12.902 13.512 13 13.276 13 13L13 6.5C13 6.359 13.048 6.241 13.144 6.144C13.241 6.048 13.359 6 13.5 6C13.641 6 13.759 6.048 13.856 6.144C13.952 6.241 14 6.359 14 6.5L14 13C14 13.254 13.953 13.5 13.86 13.736C13.758 13.993 13.609 14.219 13.414 14.414C13.219 14.609 12.993 14.758 12.736 14.86C12.5 14.953 12.254 15 12 15L4 15C3.746 15 3.5 14.953 3.264 14.86C3.007 14.758 2.781 14.609 2.586 14.414C2.391 14.219 2.242 13.993 2.14 13.736C2.047 13.5 2 13.254 2 13L2 4C2 3.746 2.047 3.5 2.14 3.264C2.242 3.007 2.391 2.781 2.586 2.586C2.781 2.391 3.007 2.242 3.264 2.14C3.5 2.047 3.746 2 4 2L5 2L5 1.5C5 1.359 5.048 1.241 5.144 1.144C5.241 1.048 5.359 1 5.5 1C5.641 1 5.759 1.048 5.856 1.144C5.952 1.241 6 1.359 6 1.5L6 2L9.5 2C9.641 2 9.759 2.048 9.856 2.144ZM11.14 2.264C11.242 2.007 11.391 1.781 11.586 1.586C11.781 1.391 12.007 1.242 12.264 1.14C12.5 1.047 12.746 1 13 1C13.254 1 13.5 1.047 13.736 1.14C13.993 1.242 14.219 1.391 14.414 1.586C14.609 1.781 14.758 2.007 14.86 2.264C14.953 2.5 15 2.746 15 3C15 3.254 14.953 3.5 14.86 3.736C14.758 3.993 14.609 4.219 14.414 4.414C14.219 4.609 13.993 4.758 13.736 4.86C13.5 4.953 13.254 5 13 5C12.746 5 12.5 4.953 12.264 4.86C12.007 4.758 11.781 4.609 11.586 4.414C11.391 4.219 11.242 3.993 11.14 3.736C11.047 3.5 11 3.254 11 3C11 2.746 11.047 2.5 11.14 2.264Z"/></svg>

React

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

export function CalendarDotIcon(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="M9.856 2.144C9.952 2.241 10 2.359 10 2.5C10 2.641 9.952 2.759 9.856 2.856C9.759 2.952 9.641 3 9.5 3L6 3L6 3.5C6 3.641 5.952 3.759 5.856 3.856C5.759 3.952 5.641 4 5.5 4C5.359 4 5.241 3.952 5.144 3.856C5.048 3.759 5 3.641 5 3.5L5 3L4 3C3.724 3 3.488 3.098 3.293 3.293C3.098 3.488 3 3.724 3 4L3 5L10.5 5C10.641 5 10.759 5.048 10.856 5.144C10.952 5.241 11 5.359 11 5.5C11 5.641 10.952 5.759 10.856 5.856C10.759 5.952 10.641 6 10.5 6L3 6L3 13C3 13.276 3.098 13.512 3.293 13.707C3.488 13.902 3.724 14 4 14L12 14C12.276 14 12.512 13.902 12.707 13.707C12.902 13.512 13 13.276 13 13L13 6.5C13 6.359 13.048 6.241 13.144 6.144C13.241 6.048 13.359 6 13.5 6C13.641 6 13.759 6.048 13.856 6.144C13.952 6.241 14 6.359 14 6.5L14 13C14 13.254 13.953 13.5 13.86 13.736C13.758 13.993 13.609 14.219 13.414 14.414C13.219 14.609 12.993 14.758 12.736 14.86C12.5 14.953 12.254 15 12 15L4 15C3.746 15 3.5 14.953 3.264 14.86C3.007 14.758 2.781 14.609 2.586 14.414C2.391 14.219 2.242 13.993 2.14 13.736C2.047 13.5 2 13.254 2 13L2 4C2 3.746 2.047 3.5 2.14 3.264C2.242 3.007 2.391 2.781 2.586 2.586C2.781 2.391 3.007 2.242 3.264 2.14C3.5 2.047 3.746 2 4 2L5 2L5 1.5C5 1.359 5.048 1.241 5.144 1.144C5.241 1.048 5.359 1 5.5 1C5.641 1 5.759 1.048 5.856 1.144C5.952 1.241 6 1.359 6 1.5L6 2L9.5 2C9.641 2 9.759 2.048 9.856 2.144ZM11.14 2.264C11.242 2.007 11.391 1.781 11.586 1.586C11.781 1.391 12.007 1.242 12.264 1.14C12.5 1.047 12.746 1 13 1C13.254 1 13.5 1.047 13.736 1.14C13.993 1.242 14.219 1.391 14.414 1.586C14.609 1.781 14.758 2.007 14.86 2.264C14.953 2.5 15 2.746 15 3C15 3.254 14.953 3.5 14.86 3.736C14.758 3.993 14.609 4.219 14.414 4.414C14.219 4.609 13.993 4.758 13.736 4.86C13.5 4.953 13.254 5 13 5C12.746 5 12.5 4.953 12.264 4.86C12.007 4.758 11.781 4.609 11.586 4.414C11.391 4.219 11.242 3.993 11.14 3.736C11.047 3.5 11 3.254 11 3C11 2.746 11.047 2.5 11.14 2.264Z" />
    </svg>
  );
}

Vue

Vue: see /icons/calendar-dot.md

Svelte

Svelte: see /icons/calendar-dot.md

HTML img

HTML img: see /icons/calendar-dot.md

CSS

CSS: see /icons/calendar-dot.md

Data URL

Data URL: see /icons/calendar-dot.md

Sprite

Sprite: see /icons/calendar-dot.md

SwiftUI

SwiftUI: see /icons/calendar-dot.md

Compose

Compose: see /icons/calendar-dot.md

Android XML

Android XML: see /icons/calendar-dot.md

Flutter

Flutter: see /icons/calendar-dot.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. 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

new invitation, unread event, new event invite

Example

Unanswered event invitation

Alternatives

user-clock: an invitation to a workspace, waiting for the invitee

Don’t confuse with

calendar-plus: plus adds an event; it never means new or unread

Also fits

pending invitation: an unanswered event invitation

Built from

calendar + dot

Tags

date, event, dot

Category

Time & calendar

Component name

CalendarDotIcon

History

2026-10-15 added

Family 26

calendar calendar-alert calendar-arrow-down calendar-arrow-up calendar-check calendar-clock calendar-day calendar-event calendar-gear calendar-heart calendar-link calendar-lock

More time & calendar icons

alarm-clock alarm-clock-check alarm-clock-off alarm-clock-plus alarm-clock-snooze clock clock-alert clock-check clock-diagonal clock-gear clock-pause clock-pencil clock-play clock-plus clock-x globe-clock · all time & calendar icons

For agents

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

calendar-dot icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp