Interface Essential

Images Photography

Money Shopping

Programming

Computer Devices

Phone

Mail

Map Travel

Food Drink

Nature Ecology

Entertainment

Shipping

Culture

Health

Work Education

Artificial Intelligence

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

Crown

Other UI

Flex Neon - Free

Cyber Duotone - Free

Crown 2

Cyber Line - Free

Core Pop - Free

Flex Duo - Free

Core Gradient - Free

Core Solid - Free

Flex Flat - Free

Core Remix - Free

Sharp Line - Streamline Material

Social

Core Duo

Trophy Award

Plump Pop

Sharp Solid

Sharp Remix

Sharp Gradient

Sharp Pop

Kameleon Colors

Rewards

Core Remix

Core Neon

Core Gradient

Flex Gradient

Sharp Flat

Plump Flat

Plump Remix

Outlined Line - Streamline Material

Flex Duo

Cyber Duotone

Crown 1

Vote Rewards

Cyber Line

Plump Duo

Plump Gradient

Core Flat

Rounded Line - Streamline Material

Core Line

Core Solid

Core Neon - Free

Flex Remix

Flex Flat

Flex Gradient - Free

Plump Line

Core Flat - Free

Flex Pop

Plump Solid

Core Duo - Free

Flex Solid

Flex Line

Sharp Line

Flex Remix - Free

Micro Line

Micro Solid

<p>[Free + Open-source] Flex is all about the curves. Its smooth curves brings fluidity and dynamism to your designs with a modern appeal.&nbsp;The Neon style is especially effective in complex environments where&nbsp;quick recognition and hierarchy&nbsp;are essential. It also allows you to customize the line thickness.&nbsp;All Flex Neon icons are designed on a 14px grid with a 1px default stroke and two customizable line colors. Licensed under the Creative Commons - CC BY 4.0</p>

<p>Flex is a fluid icon family inspired by nature’s curves. It favors smooth, flowing forms. More organic than Core and subtler than the chunky Plump. Read about the <a href="https://blog.streamlinehq.com/flex/" rel="noopener noreferrer" target="_blank">design process</a>.</p>

### **one sentence positioning**

Organic curvilinear icons that feel natural and motion-ready, with curves built into every path rather than added only at caps.

---

### **what it signals**

Human friendliness with control, calm modern energy, fluidity without cuteness.

---

### **best fit when**

- a friendly, modern tone with organic curves is needed without sacrificing legibility
- motion is a core part of the product's personality
- multiple variants are needed that each occupy a clear and distinct hierarchy role

---

### **avoid when**

- the least opinionated, most neutral system is required — use Core or Ultimate instead
- the brand must feel severe, industrial, or technically uncompromising
- enterprise-heavy surfaces risk being over-personalised without visual discipline

---

### **core visual rules**

- geometry: continuous curvilinear forms — strokes arc, bend, and flow rather than running straight between rounded endpoints
- terminals: rounded ends throughout
- corner language: squircle / soft curved logic — the curves are in the paths, not just the caps
- curves: continuous curvilinear — nature-inspired flowing construction throughout
- detail density: low
- silhouette: stable and inflated; the organic construction avoids fragile details
- emotional tension: low — the flow reads as natural rather than energised

---

### **variants and hierarchy**

Flex Line

- Most neutral; lets typography and layout lead; the organic curves carry the warmth quietly in the background

Flex Solid

- Impact and legibility; survives small sizes well; the primary state and hierarchy tool in the family

Flex Remix

- Outlined + filled in organic shapes; brand identity and editorial feature sections

Flex Pop

- Organic curves + multi-color palette; consumer apps with nature, food, or sustainability positioning

Flex Duo

- Blue tonal system + organic curves; fintech and professional wellness wanting approachability with structure

Flex Neon

- 1px organic strokes + magenta + navy; the most sophisticated neon treatment — thin organic lines in neon read as high-design, not gaming

Flex Flat

- Smooth organic silhouettes; illustrative onboarding, wellness storytelling, and product education

Flex Gradient

- Organic shapes + watercolour-quality naturally blended fills; premium lifestyle and beauty marketing

**line/solid pairing rule** Mix Line and Solid to express state — Line for inactive or default, Solid for selected, active, or emphasis. The continuous curve construction means both sub-styles read as the same family despite the weight difference.

---

### **small-size behavior**

- recommended minimum size: 18px
- best range: 18–36px
- notes: Below 18px the organic curves lose their distinguishing quality and read as simply "rounded" — the family's primary characteristic disappears at very small sizes.

---

### **motion behavior**

- strengths: continuous shapes reduce jitter during scaling; smooth and natural morphs between states
- ideal motion contexts: button feedback, toggle animations, success states, onboarding transitions, Line-to-Solid state changes, loading loops with flowing character

---

### **typography pairing**

Rounded and friendly

- SF Pro Rounded, Avenir Next Rounded, Museo Sans Rounded, GT Walsheim, Sofia Pro Soft

Modern and curvy but still serious

- Palanquin, Bree Sans, Signika, Plus Jakarta Sans, Nunito

Free rounded options

- Rubik, Quicksand, Varela Round, M PLUS Rounded 1c, Outfit

**type alignment rule** Typefaces with smooth curves and open counters match better than rigid neo-grotesques. The organic curve construction of the icons should be reflected in the letterforms — look for typefaces where the 'a', 'e', and 'g' have visible curve intelligence rather than geometric construction.

**typefaces to avoid** Cold geometric sans with rigid structure (IBM Plex Sans, Neue Haas Grotesk), monospace fonts, sharp display faces — the organic icon curves create irresolvable tension against any type whose letterforms are built on straight lines and hard angles.

---

### **mixing guidance**

Recommended with

- Micro — Flex handles UI personality while Micro handles the density and inline layer
- Freehand — both are organic warmth families; separate by surface (Flex for UI, Freehand for editorial)

Possible with normalization

- Plump — both warm families; keep one per UI layer and reduce chroma if mixing
- Ultimate — normalize by isolating Flex to primary navigation and Ultimate to secondary controls

Avoid mixing with

- Sharp — organic curves directly contradict geometric angular construction
- Cyber — straight-line-only Cyber is the opposite of Flex's continuous curve philosophy
- Block — Bauhaus geometric solids are incompatible with organic flowing silhouettes

**normalization rules when mixing**

- keep Flex consistent within a UI layer — no family switching inside a single navigation component
- reduce chroma (use monochrome Line or Solid) if pairing with severe typography or brand system
- isolate other families to separate surfaces — product UI in Flex, marketing or documentation in another

---

### **primary use cases**

- consumer and lifestyle applications
- education products and learning platforms
- wellbeing products that are non-clinical in register
- creator tools and motion-forward product UIs
- onboarding and tutorial flows where warmth reduces friction
- premium consumer SaaS with an organic or nature-adjacent brand

---

### **secondary use cases**

- empty states and feature callouts (especially Flat sub-style)
- brand-friendly UI accents and state systems using Line/Solid/Duo patterns
- products wanting organic visual confidence without moving into hand-drawn territory

Fluid icons

Crown icon - Flex Neon - Free Set

Download Crown SVG vector or transparent PNG icon in Neon style(s) for Sketch and Figma. It belongs to Flex Neon - Free vectors SVG collection.