Activities

Android

Arrows

Audio Video

Business Payments

Common Actions

Communication

Hardware

Home

Household

Maps

Photo Image

Privacy Security

Social

Text Formatting

Transportation

Travel

UI Actions

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

View

Basic UI

Cyber Duotone - Free

View 2

Interface Essential

Cyber Line - Free

Ultimate Bold

360 View

Virtual Reality

Cyber Duotone

View 1

Content Edition

Ultimate Colors

Micro Line

Edit

Ultimate Light

Cyber Line

Micro Solid

Ultimate Duotone

Ultimate Regular

Stickies Colors

Stickies Duo

Tabler Line

View 360

All Icons

Lucide Line

Iconoir Regular

Sharp Line - Streamline Material

File View

Grid View

Rounded Line - Streamline Material

View Agenda

View Module

Outlined Line - Streamline Material Free

View List

View Day

Plump Pop - Free

Landscape View

Images Photography

Flex Solid

Pictures

Gallery View

Design Tools

Outlined Line - Streamline Material

Sharp Remix

Nova Line

Page View

Web Development Apps

Plump Solid

Portrait View

Core Duo

Freehand Duotone

View Eye

Sharp Flat

View Eye Solo

View Off Disable

Kameleon Pop

Street View

Places

View Module 2

Content

Rounded Fill - Streamline Material

View Quilt Fill

Core Remix

View Setting Gear

<p>Material Pro Outlined Fill variant provides filled icon shapes while maintaining the Material Design System's principles with improved consistency and coverage.</p>

Outlined Fill - Streamline Material

<p>Everything you love about Material, without the flaws. We fixed inconsistencies, expanded the library, and rebuilt it for total coverage.</p>

   ### **one sentence positioning**

   The Material Design icon vocabulary expanded — ~31,000 icons across six interchangeable styles built to scale beyond what Google's own library covers.

---

   ### **what it signals**

   Familiarity, clarity, structured neutrality, material ecosystem alignment.

---

   ### **best fit when**

   - the product already uses Material Design patterns and needs far broader icon coverage
   - switching between outlined, rounded, and sharp tone without changing the underlying language is a design system requirement
   - avoiding patchwork from multiple icon sources across large product teams

---

   ### **avoid when**

   - a distinct non-material visual identity is the goal
   - hand-drawn warmth or highly expressive brand visuals are required
   - the UI language is intentionally non-material and the association would create confusion

---

   ### **core visual rules**

   - geometry: clean geometry, 24px grid discipline, consistent stroke weight across all six styles
   - terminals: varies by style — rounded for Rounded variants, flat for Outlined and Sharp
   - corner language: three corner modes — Outlined (neutral), Rounded (soft), Sharp (crisp); each available in line and fill
   - curves: mathematical arcs, disciplined spacing, simplified internal structure
   - detail density: low to medium
   - silhouette: stable, disciplined proportions, strong symbol hierarchy consistent across categories
   - emotional tension: low — neutral by design; the style variants handle tone, not the geometry

---

   ### **variants and hierarchy**

   Outlined Line

   - The most neutral sub-style; standard UI controls, dense layouts, close to Google's baseline Material icon set

   Outlined Fill

   - Solid fills with outlined detail; active states and emphasis within a neutral palette

   Rounded Line

   - Softened geometry with rounded terminals; slightly warmer register while remaining Material-compatible

   Rounded Fill

   - Rounded solid fills; mobile navigation and primary actions in consumer-facing Material products

   Sharp Line

   - Crisp, squared-off geometry; enterprise, developer tools, and technical products using Material conventions

   Sharp Fill

   - Sharp solid fills; the highest-contrast Material sub-style; strong hierarchy in dense or dark layouts

   **line/solid pairing rule** All six styles share the same underlying symbol vocabulary — switch between line and fill for hierarchy within a style, and between Outlined / Rounded / Sharp for tonal adjustment. The three corner modes are interchangeable without visual inconsistency because all share the 24px grid and symbol logic.

---

   ### **small-size behavior**

   - recommended minimum size: 16px
   - best range: 16–32px
   - notes: Tuned for dense interfaces where scanning speed matters — the simplified internal structure holds at 16px better than more detailed families.

---

   ### **motion behavior**

   - strengths: stable scaling, predictable morph paths — the symbol vocabulary is consistent enough that line-to-fill transitions read as the same icon at different weights
   - ideal motion contexts: tab bar state transitions, toolbar hover feedback, loading indicators, navigation pushes in Material-pattern products

---

   ### **typography pairing**

   Native Material feel

   - Roboto, Roboto Flex, Noto Sans

   Modern product UI default

   - Inter, SF Pro, IBM Plex Sans, Source Sans 3

   Geometric crisp tone

   - Manrope, Space Grotesk, Sora, Plus Jakarta Sans

   Enterprise-neutral polished

   - Helvetica Now, Neue Haas Grotesk, Aktiv Grotesk, Univers, Söhne

   Developer-facing contexts

   - Pair any UI font with: IBM Plex Mono, JetBrains Mono, Source Code Pro, Roboto Mono

   **type alignment rule** Align type with icon tone — Rounded styles pair well with slightly rounder UI sans; Sharp styles pair with rigid grotesks; Outlined is most neutral and tolerant of any pairing. Test at real UI sizes (16–24px).

   **typefaces to avoid** Handwritten scripts, decorative display fonts, highly humanist serif faces at body weight — any type with strong personality overrides the deliberate neutrality of the Material vocabulary.

---

   ### **mixing guidance**

   Recommended with

   - Micro — use Micro as the density layer for tables and inline actions while Streamline Material handles primary navigation
   - Nova — both share Material familiarity; separate by product section if mixing is necessary

   Possible with normalization

   - Core — compatible neutral geometry; isolate to separate product surfaces
   - Ultimate — nearly identical purpose; keep one family per product layer

   Avoid mixing with

   - Freehand — hand-drawn organics contradict Material precision
   - Cyber — straight-line-only construction is incompatible with Material's concept-appropriate geometry
   - Plump — inflated cartoon proportions conflict with the disciplined Material vocabulary

   **normalization rules when mixing**

   - avoid mixing Streamline Material with non-material families inside the same primary UI components
   - if needed, isolate by surface — product UI in Streamline Material, marketing or editorial in another
   - keep tone consistent (Rounded vs Sharp) across a single UI layer — never mix corner modes within the same navigation or toolbar

---

   ### **primary use cases**

   - products already using Material Design patterns needing far broader icon coverage
   - growing SaaS and mobile products avoiding multiple icon sources across teams
   - dashboards, admin panels, and mobile apps with Material conventions
   - modern product categories: AI, security, data tooling, cloud platforms
   - design systems requiring interchangeable tone-switching (Outlined / Rounded / Sharp)

---

   ### **secondary use cases**

   - fintech and payment products on Android or cross-platform
   - developer tools and cloud infrastructure products
   - productivity and collaboration software with Material lineage
   - marketplaces, logistics, and education platforms with complex navigation

View Quilt Fill icon - Outlined Fill - Streamline Material Set

Download View Quilt Fill SVG vector or transparent PNG icon in Solid, Bold, Glyph, Geometric style(s) for Sketch and Figma. It belongs to Outlined Fill - Streamline Material vectors SVG collection.