50 live icons × 20 styles · free · MIT
Icons that show
your numbers.
A calendar with your date. A battery at your level. A bell with your count, a tag with your words. Type it in, pick one of 20 styles, download it for slides, docs or your website.
50 live icons · Line style
Calendar6
Calendar pages with the day, month, weekday or date range you set.
- Calendar date Day of the month · Month · Binder rings
- Calendar weekday Day of the month · Day of the week · Binder rings
- Calendar month Month · Highlighted dot in the grid · Binder rings
- Calendar event Day of the month · Event marker · Label, up to 3 characters
- Calendar range First day · Last day · Binder rings
- Tear-off calendar Day of the month · Torn bottom edge
Time6
Clocks, watches, alarms and timers that show the time you choose.
Battery & signal8
Battery charge, Wi-Fi, signal bars, network type and volume at the level you pick.
- Battery level Charge · Show a warning at or below
- Battery percentage Charge , written as a percentage · Add the % sign when it fits
- Battery level (upright) Charge · Show a warning at or below
- Charging battery level Charge
- Signal strength Bars lit · Show unlit bars as dots · Cross at zero bars
- Wi-Fi strength Arcs lit · Show unlit arcs as dots
- Network type Network · Set it in a chip
- Volume level Sound waves · Show silent waves as dots · Muted
Counts6
Notification badges with your number, from a single dot up to 99+.
- Bell with count Count · Dot only · Biggest number shown
- Mail with count Count · Dot only · Biggest number shown
- Chat with count Count · Dot only · Biggest number shown
- Inbox with count Count · Dot only · Biggest number shown
- Cart with count Count · Dot only · Biggest number shown
- App with badge Count · Dot only · Biggest number shown
Labels10
Badges, tags, prices, stickers and file types with your own short text.
Weather5
Conditions, temperature, humidity, UV index and wind speed with your reading.
Progress5
Rings, gauges, bar charts, star ratings and numbered steps at your value.
Fun4
Dice, keyboard keys, initials and speech bubbles.
Nothing live matches “”.
Try “date”, “time”, “battery”, “count”, “sale”, “weather” or “progress”, or search all icons.
How it works
Three steps. No design tools.
- 1
Pick an icon
Calendars, clocks, batteries, badges, tags, weather and more. Each one has a few plain settings.
- 2
Type your value
A date, a time, a count, a level or up to four characters. The icon redraws as you type and stays readable at 16px.
- 3
Download or paste
SVG, PNG, PDF or a PowerPoint slide, in any of 20 styles and your colours. Developers get one line of HTML, React or Vue.
For developers
One element. Any value.
The @withicons/dynamic package draws every live icon in every style, in the browser or in Node. Change an attribute and the icon redraws. today keeps a calendar or clock on the visitor’s current date and time.
Install it with npm i @withicons/dynamic, or add the one script tag shown here.
<script src="https://cdn.jsdelivr.net/npm/@withicons/dynamic@0.2.1/dist/cdn/lite.js"></script>
<with-live-icon name="calendar-date" today variant="glass" size="48"></with-live-icon>
<with-live-icon name="bell-count" count="12" variant="bauhaus"></with-live-icon>
<with-live-icon name="battery-level" level="0.42" variant="skeuo"></with-live-icon>Questions
Live icons, answered
What are live icons?
Icons whose content you set. A calendar shows your date, a clock your time, a badge your count, a battery its charge, a tag your text. There are 50 of them and each one works in all 20 styles.
Are live icons free?
Yes. Like every icon on with icons, they are free for personal and commercial use under the MIT license. No sign-up, no credit needed.
How do I change the number or text on an icon?
Open the icon, type your value in the controls (a day, a time, a count, a short label), pick a style and colours, then download it as SVG, PNG, PDF or a PowerPoint slide.
Will the text stay readable when the icon is small?
Yes. Text is drawn with a stroke font built for 16 to 24 pixels, and each icon falls back when a value would get too small to read: counts over 99 become “99+”, for example.
Can a calendar icon show today’s date on my website?
Yes. Add the @withicons/dynamic script and write <with-live-icon name="calendar-date" today>. It reads the visitor’s clock and updates every minute.