Live icon · Calendar · 20 styles · free
Calendar event live icon
A calendar day with an event under it: a dot, several dots, an event bar or a short label like DUE. Set it here, then download it or paste it anywhere.
Set what it shows
Style Line clean outlines
Colour Style colours
On this page
Calendar event 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.
<script src="https://cdn.jsdelivr.net/npm/@withicons/dynamic@0.2.1/dist/cdn/lite.js"></script>
<with-live-icon name="calendar-event" day="17" marker="dot" param-label="DUE" rings size="48"></with-live-icon>import { LiveIcon } from '@withicons/dynamic/react'
export function Example() {
return <LiveIcon name="calendar-event" day={17} marker="dot" rings params={{ label: 'DUE' }} size={48} />
}<script setup>
import { LiveIcon } from '@withicons/dynamic/vue'
</script>
<template>
<LiveIcon name="calendar-event" :day="17" marker="dot" :rings="true" :params="{ label: 'DUE' }" :size="48" />
</template>Add today and it shows the visitor’s own date and time, updated every minute: <with-live-icon name="calendar-event" today>
What you can change
| Setting | What you can set | Default | Attribute |
|---|---|---|---|
| Day of the monthNumber | 1 to 31 | 17 | day |
| Event markerChoice | dot, dots, bar, label | dot | marker |
| Label, up to 3 characters (when the marker is a label)Text | Up to 3 characters: A-Z, 0-9 and % ° : - + / . , ! ? $ € £ ₹ # & * ' | DUE | param-label |
| Binder ringsOn / off | on or off | on | rings |
Also called event date calendar dot has event date marker event day appointment date scheduled day due date
Questions
How do I change the day of the month on the calendar event icon?
Use the controls next to the preview. Day of the month, Event marker, Label, up to 3 characters, and Binder rings can all be changed, the icon redraws as you go, and the download uses exactly what you see.
Is the calendar event 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="calendar-event"> 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="calendar-event" today> reads the visitor’s clock and updates every minute.