Interface Essential

Images Photography

Money Shopping

Business

Programming

Computer Devices

Artificial Intelligence

Phone

Mail

Shipping

Map Travel

Food Drink

Nature Ecology

Entertainment

Health

Work Education

Streamline 3.0

Ultimate

Core

Flex

Sharp

Plump

Micro

Freehand

Streamline Material

Nova

Cyber

Streamline Vault

Logos

Pixel

Google Material

Tabler

Remix

Feather

Iconoir

Carbon

Solar

Lucide

Brand Logos

Bootstrap

Atlas

Unicons

Ionic Icons

Phosphor

MingCute

Font Awesome

Majesticons

Mynaui

Radix

Heroicons

Flagpack

Sharp Gradient

Template Theme Design Layout

Layouts

Plump Gradient

Nova Line

Party Park Theme Park Tea Cup

Park Party

Flex Line

Sharp Line

Nova Solid

Flex Remix

Core Remix

Flex Gradient

Flex Duo

Core Neon

Sharp Pop

Flex Pop

Core Pop

Plump Pop

Core Gradient

Sharp Remix

Core Solid

Sharp Flat

Core Flat

Plump Remix

Plump Line

Light Dark Mode

Flash

Sharp Neon

Core Line

Rounded Fill - Streamline Material Free

Dark Mode Fill

Android

Core Duo

Plump Duo

Plump Solid

Flex Flat

Flex Neon

Sharp Duo

Sharp Solid

Flex Solid

Plump Flat

Plump Neon

Micro Solid - Free

Micro Line - Free

Ultimate Duotone - Free

Light Mode Bright Dark

Light Display Mode

Lighting

Ultimate Duotone

Amusement Park Rollercoaster

Amusement Parks

Micro Solid

Rounded Line - Streamline Material

Brightness 4

Photo Image

Ultimate Colors

Sharp Fill - Streamline Material

Brightness 4 Fill

Pathfinder Circle Minus Back 2

Pathfinder

Image Shadows

Edit

Ultimate Light

<p>[Free] Micro is built on a tiny 10px grid, perfect for interfaces. The Solid style is ideal for projects where quick recognition is crucial, especially effective on dark backgrounds. Licensed under the Creative Commons - CC BY 4.0</p>

<p>Built on a tiny 10px grid for maximum legibility. Ideal for navigation, buttons, and inline text icons in space-constrained designs.</p>

### **one sentence positioning**

Minimal shapes built for 10px — the only icon family designed specifically to behave like punctuation next to text.

---

### **what it signals**

Precision, restraint, UI density mastery, typographic integration.

---

### **best fit when**

- the UI is tight and text-heavy — tables, settings panels, inline actions, breadcrumbs
- icons must remain readable at 10–14px without any size increase
- icons need to coexist with text at cap-height without disrupting the reading line

---

### **avoid when**

- icons must carry brand personality or visual expressiveness
- large hero icons, empty states, or marketing visuals are needed
- primary navigation requires larger, more expressive metaphors

---

### **core visual rules**

- geometry: stripped to essential silhouette — only the minimum paths needed for recognition at 10px
- terminals: rounded — prevents sharp angle merging at high pixel density on small sizes
- corner language: minimal rounded logic for pixel clarity at minimum sizes
- curves: minimal — used only where essential for shape recognition, not for personality
- detail density: very low — zero decorative detail; visual skeleton only
- silhouette: essential, single-read — the scissors icon is blades-and-handles, not multi-segment precision
- emotional tension: very low — all design energy is directed at function, not expression

---

### **variants and hierarchy**

Micro Line

- Maximum subtlety; works inline with text, dense tables, compact toolbars; the default state

Micro Solid

- Stronger presence in the same footprint; selected and active states, tiny badges, status indicators

**line/solid pairing rule** Use Micro Line for default states and Micro Solid for selected and active — this is the preferred state pattern rather than increasing text weight or changing icon size. Both variants hold legibility in the same 10–16px range.

---

### **small-size behavior**

- recommended minimum size: 10px
- best range: 10–16px
- notes: Designed specifically to remain crisp where all other families fail — the 10px grid produces icons that hold their essential silhouette at the absolute minimum display size.

---

### **motion behavior**

- strengths: stable scaling at minimum sizes, crisp opacity transitions with no visual noise
- ideal motion contexts: subtle UI feedback in dense surfaces, micro-interactions in compact toolbars, low-noise state transitions (Line to Solid) in data tables

---

### **typography pairing**

UI-neutral workhorses

- Inter, Source Sans 3, IBM Plex Sans, Roboto, SF Pro Text, Segoe UI

Humanist clarity (warmer tone)

- Avenir Next, Calibre, Public Sans, Work Sans, Frutiger

Neo-grotesque systems (technical tone)

- Helvetica Now Text, Neue Haas Grotesk Text, Graphik, Aktiv Grotesk, Univers

**type alignment rule** Keep icon size close to the cap height of adjacent text. Avoid heavy type weights near Micro Line — the weight imbalance makes labels dominate and icons disappear. Use Micro Solid for selection emphasis rather than switching to bold text, which preserves visual balance.

**typefaces to avoid** Display fonts at any weight, hand-drawn or script fonts, highly decorative typefaces — the functional register of Micro requires type that shares its invisible-infrastructure philosophy.

---

### **mixing guidance**

Recommended with

- Core — Micro handles the density layer while Core manages primary navigation
- Ultimate — same pattern; Micro for inline and table contexts, Ultimate for product chrome
- Sharp — Micro as the density specialist, Sharp as the primary technical UI system

Possible with normalization

- Nova — compatible neutral construction; normalize by keeping Micro strictly below 16px
- Flex — Flex carries the personality layer while Micro handles the density layer

Avoid mixing with

- Plump — the 48px construction is the opposite end of the scale spectrum from Micro's 10px grid
- Kameleon — flat illustration containers are a categorically different register
- Stickies — display-size sticker aesthetic is incompatible with Micro's typographic density role

**normalization rules when mixing**

- use Micro as a density layer only — tables, inline actions, compact chips — while another family handles navigation and primary UI
- avoid mixing Micro with high-detail families in the same component
- maintain consistent optical weight alongside text — Micro Line near regular body text, Micro Solid near medium or semibold labels

---

### **primary use cases**

- inline text actions (edit, delete, share, open links)
- dense side panels, settings pages, and configuration forms
- data tables, column headers, and row-level actions
- tags, chips, filters, and compact input fields
- micro tooltips, breadcrumbs, and status indicators
- compact density modes in large enterprise design systems

---

### **secondary use cases**

- subtle UI animation in tight layout contexts
- system tray and OS-adjacent UI chrome

Designed for interfaces

Light Dark Mode icon - Micro Solid - Free Set

Download Light Dark Mode SVG vector or transparent PNG icon in Solid, Minimal, Bold, Geometric, Glyph style(s) for Sketch and Figma. It belongs to Micro Solid - Free vectors SVG collection.