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

Block – Free

Code

Rounded Line - Streamline Material

Common Actions

Outlined Line - Streamline Material

Sharp Line - Streamline Material

Core Pop

Programming Code Off Disabled No Code

Script

Core Duo

Flex Line

Plump Duo

Sharp Line

Flex Pop

Stickies Duo - Free

Qr Code

Email Phone

Stickies Duo

Plump Solid

Cashier

Qr Code Scan 1

QR Code

Code Blocks

Code Fork

UI Actions

Nova Line

File Code

Coding Files

Code Monitor

Plump Remix

Business Payments

Source Code

Stickies Colors - Free

Sharp Remix

Code Block

Sharp Pop

Code Bracket

Sharp Solid

Plump Flat

Flex Pop - Free

Code Monitor 1

Core Flat

Sharp Gradient

Flex Duo

Browser Code 2

Browser

Micro Line

Browser Code 1

Sharp Flat - Free

Share Code

File Code 2

Nova Solid

Ultimate Duotone

File Code 1

User Code 1

Users

Flex Solid

Folder Code

Folders

Ultimate Bold

Helmet Code

Factory

Flex Duo - Free

Sharp Pop - Free

<p>Core is timeless, like the Helvetica font or The Beatles. With its minimalist design and neutrality, it can adapt to any layout.&nbsp;The Flat style is easy to integrate into projects that need icons with a more illustrative purpose, working best at larger sizes. All Core Flat icons are designed on a 14px grid with two customizable colors.</p>

<p>The Helvetica of icons. Core is stripped to essential form with generous spacing. It's a timeless workhorse for interface design.</p>

### **one sentence positioning**

Neutral UI infrastructure on a 14px grid, designed to disappear into the interface and scale consistently across the entire product.

---

### **what it signals**

Clarity, modern UI logic, disciplined neutrality, durability, system thinking.

---

### **best fit when**

- a neutral baseline that holds long-term without feeling dated is the goal
- the interface is dense and requires minimal, consistent icons
- standardising across multiple product teams with a modern shared foundation

---

### **avoid when**

- strong warmth or playful personality is a brand requirement
- brutalist technical signalling is the intent
- icons need to act as expressive brand elements rather than functional UI chrome

---

### **core visual rules**

- geometry: controlled rectilinear with rounded softening — frequent 45° angles, disciplined proportions
- terminals: rounded — consistent rounded caps on all line variants
- corner language: rounded with 45° diagonal discipline throughout
- curves: mathematical arcs, predictable construction across all categories
- detail density: low
- silhouette: compact, stable, engineered for dense UI comfort
- emotional tension: very low — intentional neutrality; the 14px grid forces simplification

---

### **variants and hierarchy**

Core Line

- Universal UI navigation; invisible infrastructure that lets content and layout lead

Core Solid

- Dense UI contexts, active and selected states, small-size legibility emphasis

Core Remix

- Outlined + filled mix; graphic differentiation without colour for marketing and feature sections

Core Pop

- Multi-color navy + saturated palette; consumer onboarding and feature promotions

Core Duo

- Two-color blue system; polished SaaS products wanting colour-based hierarchy

Core Neon

- Magenta + navy; vivid colour identity and dark-adjacent interface contexts

Core Flat

- Two-tone blue silhouettes; onboarding flows and illustrative explainer content

Core Gradient

- Full-spectrum fills; landing pages and high-production marketing at display sizes

**line/solid pairing rule** Core Line for default and inactive states; Core Solid for selected, active, and primary emphasis. The 14px compact grid ensures both hold legibility at the same size without requiring a size increase for Solid.

---

### **small-size behavior**

- recommended minimum size: 12px
- best range: 12–28px
- notes: The 14px grid produces icons that are naturally compact — internal detail is already minimal, so the family holds at smaller sizes better than 24px-grid alternatives.

---

### **motion behavior**

- strengths: stable scaling, low visual noise, predictable morph paths between Line and Solid states
- ideal motion contexts: state transitions (inactive to active), subtle hover feedback, compact loading indicators, filter and chip animations in dense layouts

---

### **typography pairing**

Strong matches for product UI

- Inter, IBM Plex Sans, SF Pro, Helvetica Now, Neue Haas Grotesk

More branded but compatible

- Söhne, Suisse Int'l, Graphik, DM Sans, Outfit

**type alignment rule** Pair with stable, neutral, UI-optimised typography. Core is the "Helvetica of icon sets" — the type should share that same calm, system-first philosophy. Disciplined, quiet, and built to serve the content.

**typefaces to avoid** Display fonts with strong visual personality (Syne, Playfair Display), hand-drawn or script fonts — the contrast between expressive type and deliberately invisible icons creates incoherence. The type should not be louder than the icons.

---

### **mixing guidance**

Recommended with

- Micro — Core handles primary UI while Micro handles the density layer (tables, inline actions)
- Ultimate — nearly identical visual DNA; separate by component type or product section

Possible with normalization

- Nova — compatible rounded geometry; keep Nova in navigation and Core in secondary controls
- Streamline 3.0 — similar rounded language; isolate to separate product surfaces

Avoid mixing with

- Sharp — geometry contradiction; angular vs rounded within the same UI chrome is unresolvable
- Plump — extreme weight and proportion contrast
- Freehand — hand-drawn organics conflict with the engineered precision of Core

**normalization rules when mixing**

- keep Core as the primary UI layer across navigation, toolbars, and form controls
- reserve expressive families for illustrations, onboarding surfaces, or marketing pages
- never mix Core with a family of a different corner language within the same component

---

### **primary use cases**

- SaaS dashboards and productivity tool navigation
- developer tools and dense admin panels
- fintech and operations software
- enterprise and B2B applications
- dense mobile interfaces and compact component libraries
- internal tooling and analytics platforms
- settings and configuration UIs

---

### **secondary use cases**

- clean consumer apps where neutrality is a feature
- content platforms with complex navigation
- monitoring and real-time analytics interfaces

Minimal icons

Code Block icon - Core Flat Set

Download Code Block SVG vector or transparent PNG icon in Flat, Minimal, Wireframe style(s) for Sketch and Figma. It belongs to Core Flat vectors SVG collection.