Microns v 1.1.3
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 10kb.
The microns icon set includes 164 icons. The icons 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.
See the cheat sheet for a list of all icons.
Utilitarian and minimalist
Each icon is designed for simplicity and consistency. Similar to typeface design, the goal is to create a beautiful set of icons, not a set of beautiful icons. Where possible, non-essential details have been removed. Pictograms that are unlikely to be used in an interface have not been included in the set.
The icons are designed to work with a wide range of user interfaces. Microns combine subtle border radii, a confident 2 pixel line-weight, and a mix of outlines and solid shapes. Whether serious or playful, modern or classic, the icons should harmonise with a variety of visual styles.
Icons are constructed on a 480 unit grid, divided into 24×24 cells. Every node is snapped to a unit on the grid, including bezier control points. At this resolution, paths can snap to whole values without causing awkward kinks. This helps to reduce file size by doing away with decimal precision.
Line weights are always 2 pixels, so icons render crisply at 24 and 36 pixel sizes, even on low resolution screens. Angles of 45° are preferred where possible to align to the pixel grid. Border radii are limited to 1 pixel, rendering them almost imperceptible. The small radius means interior shapes can remain square, and free of noisy partially-filled pixels.
The shaded area gives a sense of where the bulk of visual weight lies for each glyph. Icons have an average of 4 pixels of clear space around them.
Icons are not slaves to the grid. For example, the top bowl on the
bold letter would appear distorted if it extended rightwards to the same extent as the lower bowl. In general, curved shapes are allowed more flexibility to break the grid because they won’t snap tightly to exact pixels.
Other visual tweaks are needed to make objects appear the same size. The smaller characters in
translate are slightly less than 2 pixels thick, so they don’t appear heavier than the other larger letters.
Similarly, the dots in
unknown are enlarged to optically match the weight of the character stroke. For the same reason, circles are slightly larger than squares in order to appear equal in size.
Inline icons, prefixed with an
i-, are smaller than other icons. The size of the shapes are designed to work well beside a text label. These icons use the same line weight as larger icons, so they remain a cohesive set.
Some shapes feature insets similar to ink traps used in type design. This reduces the pixel density at stroke junctions. Insets are helpful for icons like
i-asterisk, which otherwise suffer from a loss of clarity when rendered at small sizes.
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.
- Remove kerning groups from tabular figures
- Shift accents down across lowercase glyphs
- Create alternate five-pointed asterisk
This project aims to deliver icons to the client in under 10kb (compressed), including both the CSS and font file.