Skip to main contentSkip to docs navigation
View on GitHub

Icon Assets

Comprehensive guide to managing and distributing icon assets from Chassis Icons across web, iOS, and Android platforms.

On this page

Overview

Icon assets provide the visual language for user interfaces. Chassis Assets manages the distribution of icon files generated by the Chassis Icons project, distributing them to all target platforms with correct formats and naming conventions.

Key Benefits

Chassis Assets provides seamless icon distribution from the Chassis Icons project with features like:

  • Format Support: SVG sprites, icon fonts (WOFF2, TTF), CSS stylesheets
  • Platform Optimization: Web-ready sprites, iOS-compatible fonts, Android vector drawables
  • Brand Variations: Different icon styles for different brands using identical class names/references
  • Chassis Icons Integration: Seamless distribution of chassis-icons build output

Chassis Assets distributes icon assets generated by the Chassis Icons project. Each brand or application has its own chassis-icons build output (SVG sprites, icon fonts, CSS files) in the source directory, and Chassis Assets handles platform-specific distribution. For icon design, creation, and build configuration, refer to the Chassis Icons documentation.

File Organization

Icon assets from Chassis Icons are organized by brand and application in the source directory:

PLAINTEXT
source/
├── default/
│   └── docs/
│       └── icons/    -> Default icons (chassis-icons build output)
│           ├── alert-circle-solid.svg
│           ├── alert-circle-outline.svg
│           └── ...
└── brand-a/
    └── docs/
        └── icons/    -> Brand A icons (different style, same structure)
            ├── alert-circle-solid.svg
            ├── alert-circle-outline.svg
            └── ...

File Formats

Chassis Assets distributes every file from the source directory with platform-appropriate naming, regardless of format or extension.

For example, alert-circle-solid.svg in the source will be distributed as:

  • Web: alert-circle-solid.svg (kebab-case preserved)
  • iOS: alert_circle_solid.svg (snake_case)
  • Android: ic_alert_circle_solid.svg (snake_case with ic_ prefix)

Naming Conventions

Use descriptive, hyphenated names that indicate purpose and style:

  • alert-circle-solid.svg
  • alert-circle-outline.svg
  • arrow-left-solid.svg
  • arrow-left-outline.svg
  • github-brand.jpg
  • github-square-brand.jpg

Chassis Icons Integration

Chassis Assets works alongside the Chassis Icons project for comprehensive icon management:

Chassis Icons Role:

  • Generates icon fonts from SVG sources
  • Creates icon sprites and style sheets
  • Provides icon documentation and preview tools

Chassis Assets Role:

  • Stores and distributes source icon files (SVG, PDF)
  • Manages brand-specific icon styles with consistent naming
  • Handles platform-specific conversions (snake_case for iOS/Android, ic_ prefix for Android)
  • Distributes icons to platform output directories

Icon Files

The dist/ directory from the Chassis Icons project contains the complete build output:

  • Icon Fonts: WOFF2 (web)
  • SVG Sprites: Combined sprite sheet for efficient web loading
  • CSS Stylesheets: Icon class definitions and font-face declarations
  • Individual SVGs: Separate SVG files for direct usage (optional)

Do not manually edit files generated by Chassis Icons. Any changes should be made in the Chassis Icons project source and then rebuilt.

Workflow

  1. Design icons for each brand or app using consistent naming
  2. Export icons to the svgs/ directory in the Chassis Icons project
  3. Build icons using Chassis Icons to generate font files, sprites, and CSS:
    Shell
    cd [/path/to/chassis-icons]
pnpm icons
  4. Copy Chassis Icons output to the appropriate icons/ directory in the Chassis Assets source
    PLAINTEXT
    source/
├── default/
│   └── docs/
│       └── icons/                      -> Default icons (chassis-icons build output)
│           ├── chassis-icons.css       -> Icon font CSS
│           ├── chassis-icons.woff2     -> Icon font for web
│           ├── chassis-icons.svg       -> SVG sprite sheet
│           └── glyphs/                 -> Individual icon files (optional)
│               ├── alert-circle-solid.svg
│               ├── alert-circle-outline.svg
│               └── ...
└── brand-a/
    └── docs/
        └── icons/                      -> Brand A icons (different style, same structure)
            ├── chassis-icons.css       -> Brand A's icon font CSS
            ├── chassis-icons.woff2     -> Brand A's icon font
            ├── chassis-icons.svg       -> Brand A's SVG sprite
            └── glyphs/                 -> Brand A's individual icon files (optional)
                ├── alert-circle-solid.svg
                ├── alert-circle-outline.svg
                └── ...
  5. Run Chassis Assets build to distribute platform-specific icons:
    Shell
    pnpm assets

Using identical icon names across brands enables:

  • Code references arrow-right and gets the correct brand's visual style
  • Brand switching without code changes
  • Shared icon documentation across brands
  • Unified icon font generation via chassis-icons

Brand Variations

Create separate Chassis Icons builds for each brand with different icon styles. Each brand's icons should use identical names but different visual styles, allowing for brand switching without code changes.

This enables:

  • ✅ Code references the same icon classes (e.g., .cx-icon-menu) across all brands
  • ✅ Switch brands by changing only the source directory
  • ✅ No code changes needed for brand switching
  • ✅ Consistent icon API across applications

Distribution Structure

After running the build, icon assets are distributed to platform-specific directories:

Web Distribution

PLAINTEXT
dist/web/[brand]-[app]/icons/
├── chassis-icons.css
├── chassis-icons.woff2
├── chassis-icons.woff
├── sprite.svg
└── individual/
    ├── arrow-right.svg
    ├── menu.svg
    └── search.svg

See Web Applications for how to use these icons in your web project.

iOS Distribution

PLAINTEXT
dist/ios/[brand]-[app]/icons/
├── chassis_icons.ttf
└── individual/
    ├── arrow_right.svg
    ├── menu.svg
    └── search.svg

See iOS Applications for how to use these icons in your iOS project.

Android Distribution

PLAINTEXT
dist/android/[brand]-[app]/icons/
├── chassis_icons.ttf
└── individual/
    ├── ic_arrow_right.xml
    ├── ic_menu.xml
    └── ic_search.xml

See Android Applications for how to use these icons in your Android project.