Interface Essential

Computers Devices Electronics

Internet Networks Servers

Programing Apps Websites

Business

Work Office Companies

Money Payments Finance

Shopping Ecommerce

Content

Design

Images Photography

Music Video Entertainment

Phones Mobile Devices

Email Messages

Wayfinding

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 Regular - Free

Speaker 1

Music Audio

Core Flat - Free

Speaker 2

Entertainment

Plump Remix - Free

Kameleon Duo - Free

Speaker

Images Audio

Core Line - Free

Plump Gradient - Free

Ultimate Colors - Free

Ultimate Duotone - Free

Plump Line - Free

Core Solid - Free

Sharp Line - Streamline Material

Hardware

Plump Flat

Speakers

Ultimate Duotone

Music

Ultimate Regular

Micro Line

Core Line

Plump Solid

Plump Gradient

Ultimate Bold

Plump Line

Outlined Line - Streamline Material

Kameleon Duo

Audio

Core Gradient - Free

Core Pop - Free

Plump Flat - Free

Plump Pop

Freehand Duotone

Kameleon Pop

Speaker 4

Kameleon Colors

Stickies Duo

Audio Video

Cyber Line

Headset

Core Neon

Core Duo - Free

Core Gradient

Flex Solid - Free

Flex Duo - Free

Flex Flat - Free

Flex Flat

Sharp Pop

Sharp Duo - Free

Rounded Line - Streamline Material

Plump Neon - Free

Ultimate Colors

<p>[Free + Open-source] Freehand is as unique as your own calligraphy. Add a touch of warmth to your designs with this charming family based on a hand-drawn line construction. The Duotone style is perfect for projects that require differentiation between actions, using color to convey meaning effectively. All Freehand Duotone icons are designed on a 24px grid with a modulated stroke and two customizable colors. Licensed under the Creative Commons - CC BY 4.0</p>

Freehand Duotone - Free

<p>Largest hand-drawn icon set with calligraphic charm. Varying stroke thickness creates artistic appeal. Recommended for authentic brands.</p>

### **one sentence positioning**

A hand-drawn icon system at real product scale — 11,100+ icons with calligraphic warmth and controlled imperfection that still works as functional UI.

---

### **what it signals**

Authenticity, friendliness, creativity, human presence.

---

### **best fit when**

- the interface must feel made by people, for people — not assembled by a design system
- hand-drawn warmth is a brand requirement but full UI coverage cannot be sacrificed
- strong visual differentiation from geometric competitors is a strategic goal

---

### **avoid when**

- strict enterprise neutrality or infrastructure authority is required
- the product communicates technical precision as its primary trust signal
- icon deployment below 20px is a frequent use case

---

### **core visual rules**

- geometry: hand-drawn organic — strokes thicker at entry curves, thinner at linear segments; controlled imperfection throughout
- terminals: fully rounded, organic — no square caps; path ends vary slightly as a hand would
- corner language: organic, slightly irregular; radiuses are not perfectly circular
- curves: calligraphic modulation — variable weight that proves the presence of a human hand
- detail density: low to medium
- silhouette: legible but deliberately imperfect; the organic quality is the feature, not the bug
- emotional tension: low — the imperfection reads as warmth, not instability

---

### **variants and hierarchy**

Freehand (base)

- Full calligraphic variable stroke, monochrome; the complete hand-drawn register across all categories

Freehand Duotone

- Same calligraphic construction with blue accent applied to selected elements; slightly more structured for products with a defined brand blue

**line/solid pairing rule** Freehand does not have a solid sub-style. Use the base variant for standard states and Duotone for contexts where colour differentiation is needed. The calligraphic stroke provides inherent visual hierarchy through weight variation rather than fill changes.

---

### **small-size behavior**

- recommended minimum size: 24px
- best range: 24–64px
- notes: Below 20px, the calligraphic weight variation reads as inconsistency rather than craft — the variable stroke that communicates handmade quality at 24px+ becomes a legibility liability at smaller sizes.

---

### **motion behavior**

- strengths: the organic quality translates naturally to onboarding and storytelling — imperfect forms feel more alive in motion
- ideal motion contexts: onboarding sequences, storytelling interfaces, empty states, friendly feedback states, illustration-adjacent transitions

---

### **typography pairing**

Calligraphic serif (closest DNA match)

- Lora, Charter, EB Garamond, Alegreya, Crimson Pro, Cormorant

Neutral UI sans (for product UI contexts)

- Inter, IBM Plex Sans, Source Sans 3, DM Sans, Plus Jakarta Sans

Script / marker accents (use sparingly for display only)

- Caveat, Permanent Marker, Kaushan Script, Patrick Hand, Architects Daughter

**type alignment rule** For product UI: use a neutral sans so the hand-drawn icons carry the warmth while type stays legible. For marketing and editorial contexts: pair with a calligraphic serif whose stroke contrast mirrors the variable weight of the icons.

**typefaces to avoid** Cold geometric sans at any weight (IBM Plex Sans as UI text can work, but Neue Haas Grotesk at display sizes creates direct contradiction), monospace fonts — the engineered precision of any geometric system reads as visually incompatible with the calligraphic icon construction.

---

### **mixing guidance**

Recommended with

- Flex — both are organic warmth families; use Flex for primary UI chrome and Freehand for editorial or onboarding surfaces

Possible with normalization

- Plump — both are warm consumer families; keep one per surface and never mix within a single UI layer
- Ultimate — use Freehand for expressive empty states while Ultimate handles navigation infrastructure

Avoid mixing with

- Sharp — geometric precision directly contradicts the hand-drawn register
- Cyber — straight-line-only Cyber is the most mechanically opposite family available
- Micro — the extreme simplification of Micro in the same product as Freehand creates an unresolvable quality gap

**normalization rules when mixing**

- keep one icon family per UI control layer — never mix Freehand with a geometric family in the same navigation or toolbar
- reserve Freehand for onboarding, empty states, and editorial surfaces if mixing with a primary geometric system
- avoid placing Freehand alongside high-precision UI components — the contrast reads as unfinished, not intentional

---

### **primary use cases**

- consumer apps with a friendly, personal tone
- education and learning platforms
- craft, handmade, and self-improvement products
- organic, sustainable, and artisan brands
- onboarding experiences and storytelling interfaces

---

### **secondary use cases**

- editorial design and publishing interfaces
- community and creative platform products
- posters and visual communication materials

Hand-drawn icons

Speaker icon - Freehand Duotone - Free Set

Download Speaker SVG vector or transparent PNG icon in Handrawn style(s) for Sketch and Figma. It belongs to Freehand Duotone - Free vectors SVG collection.