Interface Essential

Images Photography

Money Shopping

Business

Programming

Computer Devices

Artificial Intelligence

Phone

Mail

Shipping

Map Travel

Food Drink

Nature Ecology

Entertainment

Health

Culture

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

Block – Free

Chat

Other UI

Guidance – Free

Interface

Kameleon Pop

Social

Platinum

Outlined Line - Streamline Material

Communication

Kameleon Colors

Chat 2

Shopping

Sharp Line - Streamline Material

Rounded Line - Streamline Material

Kameleon Duo

Cyber Line

Bubble Chat 1

Messages Chat

Chat Bubble

Video Chat

Voice Chat

Micro Solid

Help Chat

Help

Outlined Fill - Streamline Material

Chat Fill

Outlined Line - Streamline Material Free

Rounded Fill - Streamline Material

Chat Alt

Cyber Duotone

Message Chat

Chat Protect

Ultimate Bold

Like Chat

Likes

Plump Solid

Desktop Chat

Computer

Freehand Duotone

Conversation Chat 2

Conversation

Chat Disappear

Chat Emoji

Core Remix

Chat Heart

Chat Error

Plump Duo

Help Chat 1

Core Duo

Sharp Fill - Streamline Material

Core Flat

Cyber Line - Free

Bubble Chat 2

Mail Chat Smiley

Sharp Gradient

Chat Bubble Text Square

Bubble Chat Question 2

Sharp Solid

Nova Solid

User Chat

Users

Sharp Line - Streamline Material Free

Conversation Chat

Core Pop

Conversation Chat 4

Bubble Chat Text 2

Core Solid

<p>Micro is built on a tiny 10px grid, perfect for interfaces. The Line variant offers minimal, clean strokes for small icon sizes.</p>

Micro Line

<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

Chat Bubble Square Add

Chat Bubble Square Add icon - Micro Line Set

Download Chat Bubble Square Add SVG vector or transparent PNG icon in Line, Minimal, Stroke, Geometric, Wireframe style(s) for Sketch and Figma. It belongs to Micro Line vectors SVG collection.