Microns

The universal icon set for user interfaces.

Microns are a no-nonsense set of icons designed specifically for user interfaces. Rather than provide a large library of unnecessary glyphs, microns provide a sensible baseline of well-drawn icons that will cover 99% of your use cases for less than 5kb.

  • 108 icons
  • Size 4.58kb
  • v 1.0.4

Arrows

Inline

Audio and Video

Charts

Time and date

User actions

Editorial

Users

Content

Navigation

Layout

Share and embed

Toggle

Alert

Text

Alignment

Connection

Examples

WYSYWYG Editor / 20px

monospace

Media Controls / 24px

Messages / 32px

Please update your details before continuing.
Your new details have been saved!

Form Elements / 24px

Dropdown

To-do list / 24px

Reminders

  •  Walk to work if the weather is good
  •  Drink some coffee
  •  Get down to business
 Create a new item

Details

Impersonal, with no added extras

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 from the font. 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. Border radii less than 32 units have been squared off, as these are not visible when rendered at 24 or 32px.

Construction Grid

Icons are constructed on a 512 unit grid, divided into 16x16 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 glyph slavishly. For example, the top bowl on the bold letter would appear distorted if it appeared along the same vertical axis.

Inline icons – prefixed with a 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.

.mu-delete
.mu-zoom-in
.mu-bold
.mu-box-cross
.mu-i-asterisk
.mu-vol-mute

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.

Ligatures

Where an icon is composed of other icons, you can use the two characters together to form a ligature glyph. All ligatures work in either direction. Ligatures may not work in all browsers.

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

 +  = 

Cheat Sheet

IconNameClass
Left Arrow.mu-arrow-left
Right Arrow.mu-arrow-right
Up Arrow.mu-arrow-up
Down Arrow.mu-arrow-down
Left.mu-left
Right.mu-right
Up.mu-up
Down.mu-down
Upload.mu-upload
Download.mu-download
Undo.mu-undo
Redo.mu-redo
Replay.mu-replay
Plus.mu-plus
Minus.mu-minus
Caret.mu-caret
Up Caret.mu-caret-up
Down Caret.mu-caret-down
Left Inline.mu-i-left
Right Inline.mu-i-right
Up Inline.mu-i-up
Down Inline.mu-i-down
Plus Inline.mu-i-plus
Minus Inline.mu-i-minus
Tick Inline.mu-i-tick
Cross Inline.mu-i-cross
Bullet Inline.mu-i-bullet
Asterisk Inline.mu-i-asterisk
Play.mu-play
Pause.mu-pause
Subtitles.mu-subtitles
Low Volume.mu-vol-low
Mid Volume.mu-vol-mid
High Volume.mu-vol-high
Mute Volume.mu-vol-mute
Captions.mu-captions
High Definition.mu-hd
Audio Description.mu-audio-description
Line Chart.mu-chart-line
Bar Chart.mu-chart-bar
Scatter Plot.mu-chart-scatter
Pie Chart.mu-chart-pie
Calendar.mu-calendar
Clock.mu-clock
Star.mu-star
Heart.mu-heart
Flag.mu-flag
Bookmark.mu-bookmark
Chat.mu-chat
Edit.mu-edit
Delete.mu-delete
Show.mu-show
Hide.mu-hide
Lock.mu-lock
Cog.mu-cog
Link.mu-link
User.mu-user
Group.mu-group
File.mu-file
Image.mu-image
Video.mu-video
Audio.mu-audio
Print.mu-print
Menu.mu-menu
Bars.mu-bars
Cancel.mu-cancel
Options (Horizontal).mu-opts-h
Options (Vertical).mu-opts-v
Search.mu-search
Zoom In.mu-zoom-in
Zoom Out.mu-zoom-out
Contract.mu-contract
Expand.mu-expand
Grid.mu-grid
Matrix.mu-matrix
Chapters.mu-chapters
RSS.mu-rss
Share.mu-share
Mail.mu-mail
Code.mu-code
Box.mu-box
Solid Box.mu-box-full
Box Plus.mu-box-plus
Box Minus.mu-box-minus
Box Tick.mu-box-tick
Box Cross.mu-box-cross
Radio Off.mu-radio-off
Radio On.mu-radio-on
Radio Filled.mu-radio-full
Info.mu-info
Warn.mu-warn
Pass.mu-pass
Fail.mu-fail
Text.mu-text
Bold.mu-bold
Italic.mu-italic
Underline.mu-underline
Strikeout.mu-strikeout
Text Size.mu-text-size
Clear Styles.mu-text-unstyle
Align Left.mu-align-left
Align Center.mu-align-center
Align Right.mu-align-right
Indent.mu-indent
Outdent.mu-outdent
Cloud.mu-cloud
Web.mu-web
Wifi.mu-wifi