Interface Essential

Technology

Computers Devices Electronics

Coding Apps Websites

Internet Network Servers

Business Products

Work Office Companies

Money Payments Finance

Shopping Ecommerce

Shipping Delivery

Content

Design

Images Photography

Music Audio

Video Movies TV

Files Folders

Users

Avatars

Emails

Phone Mobile Devices

Messages Chat

Social Media Rewards Rating

Travel

Hotel Spas

Wayfinding

Food Drinks

Furniture Decoration

Lamps Lights Fire

Clothes Footwear Accessories

Tools Construction

Ecology

Nature Farming

Pets Animals

Weather

Health Beauty

School Learning

Science

Culture Religion

Romance

Family Babies Kids

Holidays

Sports

Outdoor Recreation

Entertainment Events Hobbies

Video Games

Crime War Protection

Transportation

Maps Navigation

Building Construction

Landmarks

Real Estate

Arrows Diagrams

Logos

Political

Cannabis

Streamline 3.0

Ultimate

Core

Flex

Sharp

Plump

Micro

Freehand

Streamline Material

Nova

Cyber

Streamline Vault

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

Backspace

UI Actions

Rounded Line - Streamline Material

Sharp Line - Streamline Material

Keyboard Backspace

Hardware

Rounded Fill - Streamline Material

Backspace Fill

Outlined Fill - Streamline Material

Sharp Fill - Streamline Material

Core Line

Delete Backspace

Keyboard

Core Remix

Plump Remix

Plump Duo

Core Pop

Cyber Line

Button Backspace

Cyber Duotone

Plump Gradient

Core Gradient

Plump Pop

Plump Solid

Plump Line

Plump Flat

Plump Neon

Core Neon

Keyboard Backspace Fill

Nova Line

Keyboard Button Backspace

Freehand Duotone

Keyboard Backspace Button

Keyboard 

Nova Solid

Freehand Line - Free

Keyboard Delete Button

Sharp Solid

Delete Keyboard

Ultimate Colors

Keyboard Delete

Ultimate Regular

Core Solid

Core Duo

Core Flat

Sharp Line

Delete 2

Add Remove Delete

Arrows

Triangle Arrow Dash Left

Freehand Duotone - Free

Sharp Duo

Sharp Pop

Sharp Flat

Sharp Line - Free

<p>Freehand is the largest hand-drawn icon set available. Every icon is designed with calligraphic charm. The varying stroke thickness creates an artistic look.</p>

<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

Keyboard Backspace Button icon - Freehand Set

Download Keyboard Backspace Button SVG vector or transparent PNG icon in Handrawn, Outlined, Wireframe style(s) for Sketch and Figma. It belongs to Freehand vectors SVG collection.