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

Outlined Line - Streamline Material Free

Loop

Audio Video

Rounded Line - Streamline Material Free

Core Pop - Free

Loop 1

Sharp Neon - Free

Sharp Line - Streamline Material Free

Sharp Line - Free

Core Gradient - Free

Core Line - Free

Core Remix - Free

Core Solid - Free

Rounded Line - Streamline Material

Flex Line

Loop 2

Page Controller

Sharp Remix

Core Line

Plump Duo

Sharp Line

Plump Line

Plump Flat

Sharp Neon

Flex Solid

Flex Flat

Core Solid

Plump Solid

Plump Remix

Flex Neon

Sharp Duo

Sharp Flat

Core Duo

Core Pop

Cyber Duotone

Control

Core Flat

Sharp Solid

Sharp Solid - Free

Plump Gradient

Plump Pop

Flex Remix

Sharp Gradient

Sharp Flat - Free

Cyber Line

<p>[Free] Micro is built on a tiny 10px grid, perfect for interfaces. The Line variant offers minimal, clean strokes for small icon sizes. Licensed under the Creative Commons - CC BY 4.0</p>

Micro Line - Free

<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

Button Loop 2

Button Loop 2 icon - Micro Line - Free Set

Download Button Loop 2 SVG vector or transparent PNG icon in Line style(s) for Sketch and Figma. It belongs to Micro Line - Free vectors SVG collection.