Microns v 1.0.11
Microns are a no-nonsense icon set designed for user interfaces, providing a minimal baseline of well-drawn icons that cover 99% of your use cases in under 5kb.
Details
Microns are packaged as web font files for convenience, but the source SVG files are also available. You can install the icon set via NPM or download the assets directly from GitHub. The images and fonts are permissively licenced using Creative Commons BY-SA-4.0 and the SIL OFL-1.1 licences, allowing for use in commercial projects.
Utilitarian and minimalist
Each icon is designed to maximise consistency, while staying out of the way. Similar to typeface design where no character should stand out, no icon should draw too much attention to itself. This means the set is ready to drop into any greenfield project to get up and running straight away.
Where possible, all non-essential details have been removed. Pictograms that are unlikely to be used in an interface have been removed to ensure file size remains under 5kb. You won’t find any lifestyle or automotive iconography.
Construction Grid
Icons are constructed on a 512 unit grid, divided into 16×16 cells. Every node is snapped to a unit on the grid, which helps to reduce file size by removing unneeded decimal precision. The 512 unit grid means icons render crisply at 16, 24 and 32 pixel sizes. But icons don’t follow the grid slavishly. For example, the top bowl on the bold
letter would appear distorted if it extended rightwards to the same extent as the lower bowl. Angles of 45° are preferred where possible to align to the pixel grid. To reduce file size, border radii less than 32 units have been squared off, as these are not visible when rendered at 24 or 32px.
Inline icons, prefixed with an i-
, allow shapes to be rendered alongside text without a reduction in line weight, so the icons still appear as a cohesive set.
The shaded area gives a sense of where the bulk of visual weight lies for each glyph.
Icon Width
Icons are not fixed width, but do share common side bearings where it makes sense. For example, the vol-low
icon is narrower than the vol-high
icon, but both have the same left side bearing. This means you can easily switch between the two when the UI state changes, with no shift in the unchanged components of the icon.
It also means that a row of icons will not appear to have uneven white space between them. If you need to fix the width, you can easily do so with CSS.
Ink traps
Some shapes feature insets similar to ink traps used in type design. This is helpful for icons like mu-i-asterisk
, which might suffer from a loss of clarity when rendered at small sizes.
Examples
Cheat Sheet
Icon | Name | Class | ||
---|---|---|---|---|
Left Arrow | .mu-arrow-left | E700 | direction, west | |
Right Arrow | .mu-arrow-right | E701 | direction, east | |
Up Arrow | .mu-arrow-up | E702 | direction, north | |
Down Arrow | .mu-arrow-down | E703 | direction, south | |
Left | .mu-left | E704 | chevron, angle, west | |
Right | .mu-right | E705 | chevron, angle, east | |
Up | .mu-up | E706 | chevron, angle, north | |
Down | .mu-down | E707 | chevron, angle, south | |
Upload | .mu-upload | E708 | align, top, push | |
Download | .mu-download | E709 | align, bottom, pull | |
Undo | .mu-undo | E70A | back, history, navigate, left | |
Redo | .mu-redo | E70B | forward, history, navigate, right | |
Replay | .mu-replay | E70C | rewind, restart | |
Plus | .mu-plus | E70D | add, new, create, maximise, maximize | |
Minus | .mu-minus | E70E | delete, remove, minimise, minimize | |
Caret | .mu-caret | E70F | sort, select | |
Up Caret | .mu-caret-up | E710 | sort, select, ascending, drop, up | |
Down Caret | .mu-caret-down | E711 | sort, select, descending, drop, down | |
Left Inline | .mu-i-left | E712 | chevron, angle, west | |
Right Inline | .mu-i-right | E713 | chevron, angle, east | |
Up Inline | .mu-i-up | E714 | chevron, angle, north | |
Down Inline | .mu-i-down | E715 | chevron, angle, south | |
Plus Inline | .mu-i-plus | E716 | add, new, create, maximise, maximize | |
Minus Inline | .mu-i-minus | E717 | delete, remove, minimise, minimize | |
Tick Inline | .mu-i-tick | E718 | check, correct | |
Cross Inline | .mu-i-cross | E719 | cancel, undo, clear, wrong, incorrect | |
Bullet Inline | .mu-i-bullet | E71A | circle, dot, spot | |
Asterisk Inline | .mu-i-asterisk | E71B | check, correct | |
Play | .mu-play | E71C | media, watch, go | |
Pause | .mu-pause | E71D | media, stop | |
Subtitles | .mu-subtitles | E71E | media | |
Low Volume | .mu-vol-low | E71F | media, sound, listen, mute, quiet | |
Mid Volume | .mu-vol-mid | E720 | media, sound, listen, medium | |
High Volume | .mu-vol-high | E721 | media, sound, listen, loud | |
Mute Volume | .mu-vol-mute | E722 | media, sound, listen, silent | |
Captions | .mu-captions | E723 | media, closed, cc | |
High Definition | .mu-hd | E724 | media, high, definition, hd | |
Audio Description | .mu-audio-description | E725 | media, accessibility | |
Line Chart | .mu-chart-line | E726 | graph, data | |
Bar Chart | .mu-chart-bar | E727 | graph, data | |
Scatter Plot | .mu-chart-scatter | E728 | graph, data | |
Pie Chart | .mu-chart-pie | E729 | graph, data | |
Calendar | .mu-calendar | E72A | date, schedule, year, month | |
Clock | .mu-clock | E72B | time, schedule, hour, second, minute | |
Star | .mu-star | E72C | favourite, favorite, review, like | |
Heart | .mu-heart | E72D | favourite, favorite, love, like | |
Flag | .mu-flag | E72E | remember, alert | |
Bookmark | .mu-bookmark | E72F | save, for, later | |
Chat | .mu-chat | E730 | comment, conversation | |
Edit | .mu-edit | E731 | create | |
Delete | .mu-delete | E732 | trash, remove, archive | |
Show | .mu-show | E733 | visible, published, eye, open | |
Hide | .mu-hide | E734 | hidden, unpublished, eye, closed | |
Lock | .mu-lock | E735 | hidden | |
Cog | .mu-cog | E736 | settings, preferences | |
Link | .mu-link | E737 | anchor, chain | |
User | .mu-user | E738 | person, individual | |
Group | .mu-group | E739 | user, collection, team | |
File | .mu-file | E73A | document | |
Image | .mu-image | E73B | picture, photo | |
Video | .mu-video | E73C | play, circle | |
Audio | .mu-audio | E73D | headphones | |
.mu-print | E73E | printer | ||
Menu | .mu-menu | E73F | hamburger, bars, horizontal | |
Bars | .mu-bars | E740 | hamburger, menu, vertical | |
Cancel | .mu-cancel | E741 | undo, close, exit, cross, x | |
Options (Horizontal) | .mu-opts-h | E742 | dots, three, more, horizontal | |
Options (Vertical) | .mu-opts-v | E743 | dots, three, more, vertical | |
Search | .mu-search | E744 | find, magnify | |
Zoom In | .mu-zoom-in | E745 | magnify | |
Zoom Out | .mu-zoom-out | E746 | magnify | |
Contract | .mu-contract | E747 | minimise, minimize | |
Expand | .mu-expand | E748 | maximise, maximize | |
Grid | .mu-grid | E749 | square | |
Matrix | .mu-matrix | E74A | square, grid | |
Chapters | .mu-chapters | E74B | list | |
RSS | .mu-rss | E74C | feed | |
Share | .mu-share | E74D | connect | |
.mu-mail | E74E | email, post, send | ||
Code | .mu-code | E74F | embed | |
Box | .mu-box | E750 | box, checkbox | |
Solid Box | .mu-box-full | E751 | box, checkbox, filled | |
Box Plus | .mu-box-plus | E752 | box, checkbox, add | |
Box Minus | .mu-box-minus | E753 | box, checkbox, partial, indeterminate | |
Box Tick | .mu-box-tick | E754 | box, checkbox, selected, on | |
Box Cross | .mu-box-cross | E755 | box, checkbox, ballot | |
Radio Off | .mu-radio-off | E756 | ring, circle, off | |
Radio On | .mu-radio-on | E757 | fisheye, selected, radio, on, record | |
Radio Filled | .mu-radio-full | E758 | ring, circle, filled, on | |
Info | .mu-info | E759 | notification, warning | |
Warn | .mu-warn | E75A | notification, danger, warning, error | |
Pass | .mu-pass | E75B | confirm | |
Fail | .mu-fail | E75C | clear, error | |
Text | .mu-text | E75D | font, letter, A | |
Bold | .mu-bold | E75E | font, strong | |
Italic | .mu-italic | E75F | font, emphasis | |
Underline | .mu-underline | E760 | ||
Strikeout | .mu-strikeout | E761 | font, strikethrough, strike-out | |
Text Size | .mu-text-size | E762 | font | |
Clear Styles | .mu-text-unstyle | E763 | font, clear | |
Align Left | .mu-align-left | E764 | align, start | |
Align Center | .mu-align-center | E765 | align, middle | |
Align Right | .mu-align-right | E766 | align, end | |
Indent | .mu-indent | E767 | align, middle | |
Outdent | .mu-outdent | E768 | align, end | |
Cloud | .mu-cloud | E769 | server | |
Web | .mu-web | E76A | world, map | |
Wifi | .mu-wifi | E76B | online |
Arrows
Inline
Audio and Video
Charts
Time and date
User actions
Editorial
Users
Content
Navigation
Layout
Share and embed
Toggle
Alert
Text
Alignment
Connection