Interface Essential

Business

Images Photography

Money Shopping

Programming

Computer Devices

Phone

Mail

Map Travel

Food Drink

Nature Ecology

Entertainment

Shipping

Culture

Health

Work Education

Artificial Intelligence

Arrows

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

Ultimate Light - Free

Discount

Shopping Ecommerce

Ultimate Bold - Free

Block – Free

Shopping

Ultimate Regular - Free

Ultimate Colors - Free

Ultimate Duotone - Free

Ultimate Duotone

Discount 30

Tags Codes

Ultimate Light

Discount 70

Platinum

Ultimate Colors

Discount Coupons

Discount 1

Ultimate Regular

Ultimate Bold

Discount 50

Discount 2

Tabler Line

All Icons

Freehand Duotone - Free

Discount Percent Thin

Discount Percent Thick

Flex Duo

Discount Percent

Building Store

Plump Gradient

Freehand Duotone

Discount Percent Circle

Nova Line

Discount Coupon

Tags Coupons

Discount 50 Percent

Flex Line

Flex Gradient

Plump Solid

Discount Bubble

Discount 50 Alternate

Discount Circle

Micro Line - Free

Discount Percent Square

Core Gradient

Discount Percent Badge

Sharp Solid

Discount Percent Bag

<p>Flex is all about the curves. Its smooth curves brings fluidity and dynamism to your designs with a modern appeal.&nbsp;The Pop style is useful for projects that need a colorful touch, helping to capture attention and strengthen brand recognition.&nbsp;All Flex Pop icons are designed on a 14px grid with a mix of outlined and filled shapes, including a wide color palette.</p>

Flex Pop

<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

Discount Percent Alternate

Discount Percent Alternate icon - Flex Pop Set

Download Discount Percent Alternate SVG vector or transparent PNG icon in Pop, Filled style(s) for Sketch and Figma. It belongs to Flex Pop vectors SVG collection.