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

Flex Gradient

Cereal

Food

Sharp Pop

Core Flat

Sharp Solid

Core Line

Sharp Gradient

Core Pop

Flex Line

Core Neon

Core Remix

Flex Solid

Flex Flat

Flex Neon

Sharp Line

Flex Remix

Sharp Neon

Core Gradient

Sharp Duo

Core Solid

Sharp Remix

Sharp Flat

Flex Pop

Core Duo

Flex Duo

Ultimate Colors

Breakfast Cereal Bowl

Breakfast

Breakfast Cereal

Ultimate Bold

Ultimate Duotone

Breakfast Cereal Bowl Spoon

Ultimate Light

Ultimate Regular

Freehand Duotone

Farming Wheat

Farming

Barley

Nutrient

Cyber Line

Wheat

Rye 1

<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 Pop style is useful for projects that need a colorful touch, helping to capture attention and strengthen brand recognition.&nbsp;All Core Pop icons are designed on a 14px grid with a mix of outlined and filled shapes, including a wide color palette.</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

Cereal icon - Core Pop Set

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