Dynamic-DS - Dynamic Design System

Modern Angular Design System with dynamic theming, color customization, and icon system

English | Tiếng Việt

English

Table of Contents

• Overview
• Key Features
• Installation
• Quick Start
• Usage
• Icon System (DSI)
  • Available Icons
  • Basic Icon Usage
  • Icon Colors
  • Icon Sizes
  • Icon Animations
  • Real-World Examples
• Color System
• Typography System
• Spacing & Layout System
• Animation System
• Semantic Classes Reference
• Utility Classes
• API Reference
• Additional Resources
• Best Practices
• Migration Guide
• Troubleshooting
• Contributing
• License

Overview

Dynamic-DS (Dynamic Design System) is a comprehensive Angular library that provides a flexible design system with dynamic theming capabilities. Build consistent, beautiful UIs with customizable brand colors, semantic utility classes, and a powerful icon system.

Key Features

• Dynamic Color Theming: Customize brand, primary, secondary, functional, and utility colors
• Automatic Palette Generation: Generates 14 color shades (900-10) from a single base color
• CSS Custom Properties: All colors exposed as CSS variables for easy access
• Semantic Color Classes: Pre-built utility classes for backgrounds, text, borders, and icons
• Icon System (DSI): Bootstrap Icons-style icon system with full color customization
• Typography System: Comprehensive font utilities with semantic heading/body classes
• Spacing & Layout: Flexible spacing scale, flexbox, and CSS grid utilities
• Animation System: Pre-built transitions, keyframe animations, and loading states
• Theme Badge Palettes: 12 predefined color themes for badges and tags
• RGB Mix Algorithm: Accurate color shade generation using RGB mixing
• Runtime Color Updates: Change theme colors dynamically without page reload
• TypeScript Support: Full type definitions included
• Responsive: Works seamlessly across all screen sizes

Installation

npm install dynamic-ds

Quick Start

Follow these steps to integrate Dynamic-DS into your Angular application:

Add the design system styles to your angular.json:

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": ["node_modules/dynamic-ds/styles/system-design.scss", "src/styles.scss"]
          }
        }
      }
    }
  }
}

Or import directly in your styles.scss:

@import "dynamic-ds/styles/system-design.scss";

For Module-based Apps

In your app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { DynamicDsModule } from "dynamic-ds";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    DynamicDsModule.forRoot({
      brand: "#2740B4",
      primary: "#006BDF",
      secondary: "#9F5100",
      functional: "#006BDF",
      utility: "#CF0026",
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

For Standalone Apps (Angular 14+)

In your app.config.ts:

import { ApplicationConfig } from "@angular/core";
import { provideAnimations } from "@angular/platform-browser/animations";
import { SYSTEM_DESIGN_CONFIG } from "dynamic-ds";

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    {
      provide: SYSTEM_DESIGN_CONFIG,
      useValue: {
        brand: "#2740B4",
        primary: "#006BDF",
        secondary: "#9F5100",
        functional: "#006BDF",
        utility: "#CF0026",
      },
    },
  ],
};

In your app.component.ts:

import { Component, inject, OnInit } from "@angular/core";
import { DynamicDsService } from "dynamic-ds";

@Component({
  selector: "app-root",
  template: `
    <div class="bg-primary-canvas">
      <h1 class="text-primary-strong">Welcome to Dynamic-DS!</h1>
      <i class="dsi dsi-activity-heart-solid dsi-primary-600 dsi-2x"></i>
    </div>
  `,
})
export class AppComponent implements OnInit {
  private themeService = inject(DynamicDsService);

  ngOnInit() {
    // Initialize theme with config or defaults
    this.themeService.initializeTheme().subscribe();
  }
}

That's it! You're ready to use Dynamic-DS components and utilities.

In your app.component.ts:

import { Component, inject, OnInit } from "@angular/core";
import { DynamicDsService } from "dynamic-ds";

@Component({
  selector: "app-root",
  template: `...`,
})
export class AppComponent implements OnInit {
  private themeService = inject(DynamicDsService);

  ngOnInit() {
    // Initialize theme with config or defaults
    this.themeService.initializeTheme().subscribe();
  }
}

Usage

Dynamic-DS provides multiple ways to style your components:

The easiest way to apply design system colors:

<!-- Background colors -->
<div class="bg-primary-canvas">Lightest primary background</div>
<div class="bg-primary-soft">Soft primary background</div>
<div class="bg-primary-sub">Subtle primary background</div>
<div class="bg-primary-accent">Primary accent background</div>

<!-- Text colors -->
<p class="text-primary-strong">Strong primary text</p>
<p class="text-primary-sub">Subtle primary text</p>
<p class="text-neutral-soft">Soft neutral text</p>
<p class="text-neutral-strong">Strong neutral text</p>

<!-- Borders -->
<div class="stroke-primary-strong">Strong primary border</div>
<div class="stroke-primary-sub">Subtle primary border</div>

<!-- Icons (for icon fonts) -->
<i class="icon-primary-strong">★</i>
<i class="icon-neutral-soft">☆</i>

Available semantic types:

• brand, primary, secondary, functional, utility
• neutral
• Badge themes: red, orange, yellow, lime, green, ocean, blue, indigo, violet, pink

For precise color control with shade numbers:

<!-- Backgrounds with specific shades -->
<div class="color-bg-primary-600">Primary 600 background</div>
<div class="color-bg-primary-100">Primary 100 background</div>

<!-- Text with specific shades -->
<p class="color-text-neutral-900">Neutral 900 text</p>
<p class="color-text-primary-700">Primary 700 text</p>

<!-- Borders with specific shades -->
<div class="color-stroke-primary-300">Primary 300 border</div>

Available shades: 10, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 850, 875, 900

For advanced styling in your component SCSS/CSS files:

.my-component {
  // Basic color usage
  background-color: var(--primary-600);
  color: var(--neutral-900);
  border: 1px solid var(--primary-200);

  // With alpha transparency
  &::before {
    background-color: rgba(var(--primary-600-rgb), 0.5);
  }

  // Gradient example
  background: linear-gradient(135deg, var(--primary-600), var(--secondary-600));
}

// Hover states
.button:hover {
  background-color: var(--primary-700);
  border-color: var(--primary-800);
}

All available CSS variables:

// Dynamic colors (with all 14 shades: 10-900)
--brand-{shade}
--primary-{shade}
--secondary-{shade}
--functional-{shade}
--utility-{shade}
--neutral-{shade}

// RGB values for transparency
--brand-{shade}-rgb
--primary-{shade}-rgb
// ... etc

// Theme colors (for badges/tags)
--theme-red-{shade}
--theme-orange-{shade}
--theme-yellow-{shade}
--theme-lime-{shade}
--theme-green-{shade}
--theme-ocean-{shade}
--theme-blue-{shade}
--theme-indigo-{shade}
--theme-violet-{shade}
--theme-pink-{shade}

Update theme colors at runtime programmatically:

import { Component, inject } from "@angular/core";
import { DynamicDsService } from "dynamic-ds";

@Component({
  selector: "app-settings",
  template: `
    <button (click)="updateTheme()">Change Theme</button>
    <button (click)="resetTheme()">Reset Theme</button>
  `,
})
export class SettingsComponent {
  private themeService = inject(DynamicDsService);

  updateTheme() {
    this.themeService.updateSystemDesignColor({
      primaryColor: "#FF5733",
      secondaryColor: "#33FF57",
      brandColor: "#9C27B0",
    });
  }

  resetTheme() {
    this.themeService.resetToDefaults();
  }

  getCurrentColors() {
    const colors = this.themeService.getCurrentColors();
    console.log(colors);
    // Output: { brand: '#...', primary: '#...', secondary: '#...', ... }
  }
}

Icon System (DSI)

Dynamic-DS includes a powerful icon system similar to Bootstrap Icons, with full color customization support using CSS mask technique.

<!-- Simple icon (default size, default color) -->
<i class="dsi dsi-activity-line"></i>

<!-- Icon with color from design system -->
<i class="dsi dsi-activity-line dsi-primary-600"></i>
<i class="dsi dsi-activity-heart-solid dsi-theme-red-600"></i>
<i class="dsi dsi-anchor-line dsi-brand-700"></i>

<!-- Icon with custom color using CSS variable -->
<i class="dsi dsi-anchor-line" style="color: var(--primary-600)"></i>
<i class="dsi dsi-activity-line" style="color: #FF6B00"></i>

<!-- Icon with size modifier -->
<i class="dsi dsi-activity-line dsi-xs"></i>
<!-- Extra small -->
<i class="dsi dsi-activity-line dsi-lg"></i>
<!-- Large -->
<i class="dsi dsi-activity-line dsi-2x"></i>
<!-- 2x size -->

<!-- Icon with animation -->
<i class="dsi dsi-activity-line dsi-spin"></i>
<!-- Rotating -->
<i class="dsi dsi-activity-heart-solid dsi-pulse"></i>
<!-- Pulsing -->

<!-- Combining everything -->
<i class="dsi dsi-activity-line dsi-primary-600 dsi-2x dsi-spin"></i>

The library includes 306 icons with multiple style variants (duocolor, duotone, line, solid). Below is the complete list:

Activity & Status Icons

| Icon | Duocolor | Duotone | Line | Solid | Class Names | |------|------|------|------|------|-------------| | Activity | - | - | | | dsi-activity-line dsi-activity-solid | | Activity Heart | - | - | | | dsi-activity-heart-line dsi-activity-heart-solid | | Check Circle | | | | | dsi-check-circle-duocolor dsi-check-circle-duotone dsi-check-circle-line dsi-check-circle-solid | | Check Square | - | - | | | dsi-check-square-line dsi-check-square-solid | | Info Circle | - | - | | | dsi-info-circle-line dsi-info-circle-solid | | X Close | - | - | | | dsi-x-close-line dsi-x-close-solid | | X Circle | | | | | dsi-x-circle-duocolor dsi-x-circle-duotone dsi-x-circle-line dsi-x-circle-solid | | Minus Circle | | | | | dsi-minus-circle-duocolor dsi-minus-circle-duotone dsi-minus-circle-line dsi-minus-circle-solid | | Alert Circle | - | - | | | dsi-alert-circle-line dsi-alert-circle-solid |

Navigation Icons

| Icon | Line | Solid | Class Names | |------|------|------|-------------| | Anchor | | | dsi-anchor-line dsi-anchor-solid | | Home 01 | | | dsi-home-01-line dsi-home-01-solid | | Home 02 | | | dsi-home-02-line dsi-home-02-solid | | Home 03 | | | dsi-home-03-line dsi-home-03-solid | | Home 04 | | | dsi-home-04-line dsi-home-04-solid | | Home 05 | | | dsi-home-05-line dsi-home-05-solid | | Home Line | | | dsi-home-line-line dsi-home-line-solid | | Home Smile | | | dsi-home-smile-line dsi-home-smile-solid |

Arrow Icons

| Icon | Line | Solid | Class Names | |------|------|------|-------------| | Arrow Up | | | dsi-arrow-up-line dsi-arrow-up-solid | | Arrow Down | | | dsi-arrow-down-line dsi-arrow-down-solid | | Arrow Left | | | dsi-arrow-left-line dsi-arrow-left-solid | | Arrow Right | | | dsi-arrow-right-line dsi-arrow-right-solid | | Arrow Up Left | | | dsi-arrow-up-left-line dsi-arrow-up-left-solid | | Arrow Up Right | | | dsi-arrow-up-right-line dsi-arrow-up-right-solid | | Arrow Down Left | | | dsi-arrow-down-left-line dsi-arrow-down-left-solid | | Arrow Down Right | | | dsi-arrow-down-right-line dsi-arrow-down-right-solid |

Arrow Circle Icons

| Icon | Line | Solid | Class Names | |------|------|------|-------------| | Arrow Circle Up | | | dsi-arrow-circle-up-line dsi-arrow-circle-up-solid | | Arrow Circle Down | | | dsi-arrow-circle-down-line dsi-arrow-circle-down-solid | | Arrow Circle Left | | | dsi-arrow-circle-left-line dsi-arrow-circle-left-solid | | Arrow Circle Right | | | dsi-arrow-circle-right-line dsi-arrow-circle-right-solid | | Arrow Circle Up Left | | | dsi-arrow-circle-up-left-line dsi-arrow-circle-up-left-solid | | Arrow Circle Up Right | | | dsi-arrow-circle-up-right-line dsi-arrow-circle-up-right-solid | | Arrow Circle Down Left | | | dsi-arrow-circle-down-left-line dsi-arrow-circle-down-left-solid | | Arrow Circle Down Right | | | dsi-arrow-circle-down-right-line dsi-arrow-circle-down-right-solid |

Arrow Square Icons

| Icon | Line | Solid | Class Names | |------|------|------|-------------| | Arrow Square Up | | | dsi-arrow-square-up-line dsi-arrow-square-up-solid | | Arrow Square Down | | | dsi-arrow-square-down-line dsi-arrow-square-down-solid | | Arrow Square Left | | | dsi-arrow-square-left-line dsi-arrow-square-left-solid | | Arrow Square Right | | | dsi-arrow-square-right-line dsi-arrow-square-right-solid | | Arrow Square Up Left | | | dsi-arrow-square-up-left-line dsi-arrow-square-up-left-solid | | Arrow Square Up Right | | | dsi-arrow-square-up-right-line dsi-arrow-square-up-right-solid | | Arrow Square Down Left | | | dsi-arrow-square-down-left-line dsi-arrow-square-down-left-solid | | Arrow Square Down Right | | | dsi-arrow-square-down-right-line dsi-arrow-square-down-right-solid |

Arrow Block Icons

| Icon | Line | Solid | Class Names | |------|------|------|-------------| | Arrow Block Up | | | dsi-arrow-block-up-line dsi-arrow-block-up-solid | | Arrow Block Down | | | dsi-arrow-block-down-line dsi-arrow-block-down-solid | | Arrow Block Left | | | dsi-arrow-block-left-line dsi-arrow-block-left-solid | | Arrow Block Right | | | dsi-arrow-block-right-line dsi-arrow-block-right-solid |

Arrow Narrow Icons

| Icon | Line | Solid | Class Names | |------|------|------|-------------| | Arrow Narrow Up | | | dsi-arrow-narrow-up-line dsi-arrow-narrow-up-solid | | Arrow Narrow Down | | | dsi-arrow-narrow-down-line dsi-arrow-narrow-down-solid | | Arrow Narrow Left | | | dsi-arrow-narrow-left-line dsi-arrow-narrow-left-solid | | Arrow Narrow Right | | | dsi-arrow-narrow-right-line dsi-arrow-narrow-right-solid | | Arrow Narrow Up Left | | | dsi-arrow-narrow-up-left-line dsi-arrow-narrow-up-left-solid | | Arrow Narrow Up Right | | | dsi-arrow-narrow-up-right-line dsi-arrow-narrow-up-right-solid | | Arrow Narrow Down Left | | | dsi-arrow-narrow-down-left-line dsi-arrow-narrow-down-left-solid | | Arrow Narrow Down Right | | | dsi-arrow-narrow-down-right-line dsi-arrow-narrow-down-right-solid |

Arrow Circle Broken Icons

| Icon | Line | Solid | Class Names | |------|------|------|-------------| | Arrow Circle Broken Up | | | dsi-arrow-circle-broken-up-line dsi-arrow-circle-broken-up-solid | | Arrow Circle Broken Down | | | dsi-arrow-circle-broken-down-line dsi-arrow-circle-broken-down-solid | | Arrow Circle Broken Left | | | dsi-arrow-circle-broken-left-line dsi-arrow-circle-broken-left-solid | | Arrow Circle Broken Right | | | dsi-arrow-circle-broken-right-line dsi-arrow-circle-broken-right-solid | | Arrow Circle Broken Up Left | | | dsi-arrow-circle-broken-up-left-line dsi-arrow-circle-broken-up-left-solid | | Arrow Circle Broken Up Right | | | dsi-arrow-circle-broken-up-right-line dsi-arrow-circle-broken-up-right-solid | | Arrow Circle Broken Down Left | | | dsi-arrow-circle-broken-down-left-line dsi-arrow-circle-broken-down-left-solid | | Arrow Circle Broken Down Right | | | dsi-arrow-circle-broken-down-right-line dsi-arrow-circle-broken-down-right-solid |

Multi-Arrow Icons

| Icon | Line | Solid | Class Names | |------|------|------|-------------| | Arrows Up | | | dsi-arrows-up-line dsi-arrows-up-solid | | Arrows Down | | | dsi-arrows-down-line dsi-arrows-down-solid | | Arrows Left | | | dsi-arrows-left-line dsi-arrows-left-solid | | Arrows Right | | | dsi-arrows-right-line dsi-arrows-right-solid | | Arrows Triangle | | | dsi-arrows-triangle-line dsi-arrows-triangle-solid |

Calendar Icons

| Icon | Line | Solid | Class Names | |------|------|------|-------------| | Calendar | | | dsi-calendar-line dsi-calendar-solid | | Calendar Check 01 | | | dsi-calendar-check-01-line dsi-calendar-check-01-solid | | Calendar Check 02 | | | dsi-calendar-check-02-line dsi-calendar-check-02-solid | | Calendar Date | | | dsi-calendar-date-line dsi-calendar-date-solid | | Calendar Heart 01 | | | dsi-calendar-heart-01-line dsi-calendar-heart-01-solid | | Calendar Heart 02 | | | dsi-calendar-heart-02-line dsi-calendar-heart-02-solid | | Calendar Minus 01 | | | dsi-calendar-minus-01-line dsi-calendar-minus-01-solid | | Calendar Minus 02 | | | dsi-calendar-minus-02-line dsi-calendar-minus-02-solid | | Calendar Plus 01 | | | dsi-calendar-plus-01-line dsi-calendar-plus-01-solid | | Calendar Plus 02 | | | dsi-calendar-plus-02-line dsi-calendar-plus-02-solid |

Other Icons

| Icon | Line | Solid | Class Names | |------|------|------|-------------| | Alert Hexagon | | | dsi-alert-hexagon-line dsi-alert-hexagon-solid | | Alert Octagon | | | dsi-alert-octagon-line dsi-alert-octagon-solid | | Alert Square | | | dsi-alert-square-line dsi-alert-square-solid | | Alert Trangle | | | dsi-alert-trangle-line dsi-alert-trangle-solid | | Announcement 01 | | | dsi-announcement-01-line dsi-announcement-01-solid | | Announcement 02 | | | dsi-announcement-02-line dsi-announcement-02-solid | | Announcement 03 | | | dsi-announcement-03-line dsi-announcement-03-solid | | Bar Chart 01 | | | dsi-bar-chart-01-line dsi-bar-chart-01-solid | | Bar Chart 02 | | | dsi-bar-chart-02-line dsi-bar-chart-02-solid | | Bar Chart 03 | | | dsi-bar-chart-03-line dsi-bar-chart-03-solid | | Bar Chart 04 | | | dsi-bar-chart-04-line dsi-bar-chart-04-solid | | Bar Chart 05 | | | dsi-bar-chart-05-line dsi-bar-chart-05-solid | | Bar Chart 06 | | | dsi-bar-chart-06-line dsi-bar-chart-06-solid | | Bar Chart 07 | | | dsi-bar-chart-07-line dsi-bar-chart-07-solid | | Bar Chart 08 | | | dsi-bar-chart-08-line dsi-bar-chart-08-solid | | Bar Chart 09 | | | dsi-bar-chart-09-line dsi-bar-chart-09-solid | | Bar Chart 10 | | | dsi-bar-chart-10-line dsi-bar-chart-10-solid | | Bar Chart 11 | | | dsi-bar-chart-11-line dsi-bar-chart-11-solid | | Bar Chart 12 | | | dsi-bar-chart-12-line dsi-bar-chart-12-solid | | Bell 01 | | | dsi-bell-01-line dsi-bell-01-solid | | Bell 02 | | | dsi-bell-02-line dsi-bell-02-solid | | Bell 03 | | | dsi-bell-03-line dsi-bell-03-solid | | Bell 04 | | | dsi-bell-04-line dsi-bell-04-solid | | Book Open 01 | | | dsi-book-open-01-line dsi-book-open-01-solid | | Book Open 02 | | | dsi-book-open-02-line dsi-book-open-02-solid | | Building 01 | | | dsi-building-01-line dsi-building-01-solid | | Building 02 | | | dsi-building-02-line dsi-building-02-solid | | Building 03 | | | dsi-building-03-line dsi-building-03-solid | | Building 04 | | | dsi-building-04-line dsi-building-04-solid | | Building 05 | | | dsi-building-05-line dsi-building-05-solid | | Building 06 | | | dsi-building-06-line dsi-building-06-solid | | Building 07 | | | dsi-building-07-line dsi-building-07-solid | | Building 08 | | | dsi-building-08-line dsi-building-08-solid | | Check | | | dsi-check-line dsi-check-solid | | Chevron Down | | | dsi-chevron-down-line dsi-chevron-down-solid | | Chevron Down Double | | | dsi-chevron-down-double-line dsi-chevron-down-double-solid | | Chevron Left | | | dsi-chevron-left-line dsi-chevron-left-solid | | Chevron Left Double | | | dsi-chevron-left-double-line dsi-chevron-left-double-solid | | Chevron Right | | | dsi-chevron-right-line dsi-chevron-right-solid | | Chevron Right Double | | | dsi-chevron-right-double-line dsi-chevron-right-double-solid | | Chevron Selector Horizontal | | | dsi-chevron-selector-horizontal-line dsi-chevron-selector-horizontal-solid | | Chevron Selector Vertical | | | dsi-chevron-selector-vertical-line dsi-chevron-selector-vertical-solid | | Chevron Up | | | dsi-chevron-up-line dsi-chevron-up-solid | | Chevron Up Double | | | dsi-chevron-up-double-line dsi-chevron-up-double-solid | | Clipboard | | | dsi-clipboard-line dsi-clipboard-solid | | Clipboard Attachment | | | dsi-clipboard-attachment-line dsi-clipboard-attachment-solid | | Clipboard Check | | | dsi-clipboard-check-line dsi-clipboard-check-solid | | Clipboard Download | | | dsi-clipboard-download-line dsi-clipboard-download-solid | | Clipboard Minus | | | dsi-clipboard-minus-line dsi-clipboard-minus-solid | | Clipboard Plus | | | dsi-clipboard-plus-line dsi-clipboard-plus-solid | | Clipboard X | | | dsi-clipboard-x-line dsi-clipboard-x-solid | | Clock | | | dsi-clock-line dsi-clock-solid | | Clock Check | | | dsi-clock-check-line dsi-clock-check-solid | | Clock Fast Forward | | | dsi-clock-fast-forward-line dsi-clock-fast-forward-solid | | Clock Plus | | | dsi-clock-plus-line dsi-clock-plus-solid | | Clock Refresh | | | dsi-clock-refresh-line dsi-clock-refresh-solid | | Clock Rewind | | | dsi-clock-rewind-line dsi-clock-rewind-solid | | Clock Snooze | | | dsi-clock-snooze-line dsi-clock-snooze-solid | | Clock Stopwatch | | | dsi-clock-stopwatch-line dsi-clock-stopwatch-solid | | Coin Stacked 01 | | | dsi-coin-stacked-01-line dsi-coin-stacked-01-solid | | Coin Stacked 02 | | | dsi-coin-stacked-02-line dsi-coin-stacked-02-solid | | Coin Stacked 03 | | | dsi-coin-stacked-03-line dsi-coin-stacked-03-solid | | Coin Stacked 04 | | | dsi-coin-stacked-04-line dsi-coin-stacked-04-solid | | Dots Grid | | | dsi-dots-grid-line dsi-dots-grid-solid | | Dots Horizontal | | | dsi-dots-horizontal-line dsi-dots-horizontal-solid | | Dots Vertical | | | dsi-dots-vertical-line dsi-dots-vertical-solid | | Download 01 | | | dsi-download-01-line dsi-download-01-solid | | Download 02 | | | dsi-download-02-line dsi-download-02-solid | | Download 03 | | | dsi-download-03-line dsi-download-03-solid | | Download 04 | | | dsi-download-04-line dsi-download-04-solid | | Download Cloud 01 | | | dsi-download-cloud-01-line dsi-download-cloud-01-solid | | Download Cloud 02 | | | dsi-download-cloud-02-line dsi-download-cloud-02-solid | | Edit 01 | | | dsi-edit-01-line dsi-edit-01-solid | | Edit 02 | | | dsi-edit-02-line dsi-edit-02-solid | | Edit 03 | | | dsi-edit-03-line dsi-edit-03-solid | | Edit 04 | | | dsi-edit-04-line dsi-edit-04-solid | | Edit 05 | | | dsi-edit-05-line dsi-edit-05-solid | | Eye | | | dsi-eye-line dsi-eye-solid | | Eye Off | | | dsi-eye-off-line dsi-eye-off-solid | | File 01 | | | dsi-file-01-line dsi-file-01-solid | | File 02 | | | dsi-file-02-line dsi-file-02-solid | | File 03 | | | dsi-file-03-line dsi-file-03-solid | | File 04 | | | dsi-file-04-line dsi-file-04-solid | | File 05 | | | dsi-file-05-line dsi-file-05-solid | | File 06 | | | dsi-file-06-line dsi-file-06-solid | | File 07 | | | dsi-file-07-line dsi-file-07-solid | | File Attachment 01 | | | dsi-file-attachment-01-line dsi-file-attachment-01-solid | | File Attachment 02 | | | dsi-file-attachment-02-line dsi-file-attachment-02-solid | | File Attachment 03 | | | dsi-file-attachment-03-line dsi-file-attachment-03-solid | | File Attachment 04 | | | dsi-file-attachment-04-line dsi-file-attachment-04-solid | | File Attachment 05 | | | dsi-file-attachment-05-line dsi-file-attachment-05-solid | | File Check 01 | | | dsi-file-check-01-line dsi-file-check-01-solid | | File Check 02 | | | dsi-file-check-02-line dsi-file-check-02-solid | | File Check 03 | | | dsi-file-check-03-line dsi-file-check-03-solid | | File Minus 01 | | | dsi-file-minus-01-line dsi-file-minus-01-solid | | File Minus 02 | | | dsi-file-minus-02-line dsi-file-minus-02-solid | | File Minus 03 | | | dsi-file-minus-03-line dsi-file-minus-03-solid | | File Plus 01 | | | dsi-file-plus-01-line dsi-file-plus-01-solid | | File Plus 02 | | | dsi-file-plus-02-line dsi-file-plus-02-solid | | File Plus 03 | | | dsi-file-plus-03-line dsi-file-plus-03-solid | | File Shield 01 | | | dsi-file-shield-01-line dsi-file-shield-01-solid | | File Shield 02 | | | dsi-file-shield-02-line dsi-file-shield-02-solid | | File Shield 03 | | | dsi-file-shield-03-line dsi-file-shield-03-solid | | Filter Funnel 01 | | | dsi-filter-funnel-01-line dsi-filter-funnel-01-solid | | Filter Funnel 02 | | | dsi-filter-funnel-02-line dsi-filter-funnel-02-solid | | Folder | | | dsi-folder-line dsi-folder-solid | | Folder Check | | | dsi-folder-check-line dsi-folder-check-solid | | Folder Closed | | | dsi-folder-closed-line dsi-folder-closed-solid | | Folder Download | | | dsi-folder-download-line dsi-folder-download-solid | | Folder Lock | | | dsi-folder-lock-line dsi-folder-lock-solid | | Folder Minus | | | dsi-folder-minus-line dsi-folder-minus-solid | | Folder Plus | | | dsi-folder-plus-line dsi-folder-plus-solid | | Folder Question | | | dsi-folder-question-line dsi-folder-question-solid | | Folder Search | | | dsi-folder-search-line dsi-folder-search-solid | | Folder X | | | dsi-folder-x-line dsi-folder-x-solid | | Help Circle | | | dsi-help-circle-line dsi-help-circle-solid | | Help Hexagon | | | dsi-help-hexagon-line dsi-help-hexagon-solid | | Help Octagon | | | dsi-help-octagon-line dsi-help-octagon-solid | | Help Square | | | dsi-help-square-line dsi-help-square-solid | | Info Hexagon | | | dsi-info-hexagon-line dsi-info-hexagon-solid | | Info Octagon | | | dsi-info-octagon-line dsi-info-octagon-solid | | Info Square | | | dsi-info-square-line dsi-info-square-solid | | Laptop 01 | | | dsi-laptop-01-line dsi-laptop-01-solid | | Laptop 02 | | | dsi-laptop-02-line dsi-laptop-02-solid | | List | | | dsi-list-line dsi-list-solid | | Log Out 01 | | | dsi-log-out-01-line dsi-log-out-01-solid | | Log Out 02 | | | dsi-log-out-02-line dsi-log-out-02-solid | | Log Out 03 | | | dsi-log-out-03-line dsi-log-out-03-solid | | Log Out 04 | | | dsi-log-out-04-line dsi-log-out-04-solid | | Mail 01 | | | dsi-mail-01-line dsi-mail-01-solid | | Mail 02 | | | dsi-mail-02-line dsi-mail-02-solid | | Mail 03 | | | dsi-mail-03-line dsi-mail-03-solid | | Mail 04 | | | dsi-mail-04-line dsi-mail-04-solid | | Mail 05 | | | dsi-mail-05-line dsi-mail-05-solid | | Message Dots Circle | | | dsi-message-dots-circle-line dsi-message-dots-circle-solid | | Message Dots Square | | | dsi-message-dots-square-line dsi-message-dots-square-solid | | Message Notification Circle | | | dsi-message-notification-circle-line dsi-message-notification-circle-solid | | Message Notification Square | | | dsi-message-notification-square-line dsi-message-notification-square-solid | | Notification Box | | | dsi-notification-box-line dsi-notification-box-solid | | Notification Message | | | dsi-notification-message-line dsi-notification-message-solid | | Notification Text | | | dsi-notification-text-line dsi-notification-text-solid | | Pencil 01 | | | dsi-pencil-01-line dsi-pencil-01-solid | | Pencil 02 | | | dsi-pencil-02-line dsi-pencil-02-solid | | Pencil Line | | | dsi-pencil-line-line dsi-pencil-line-solid | | Plus | | | dsi-plus-line dsi-plus-solid | | Plus Circle | | | dsi-plus-circle-line dsi-plus-circle-solid | | Plus Square | | | dsi-plus-square-line dsi-plus-square-solid | | Refresh Ccw 01 | | | dsi-refresh-ccw-01-line dsi-refresh-ccw-01-solid | | Refresh Ccw 02 | | | dsi-refresh-ccw-02-line dsi-refresh-ccw-02-solid | | Refresh Ccw 03 | | | dsi-refresh-ccw-03-line dsi-refresh-ccw-03-solid | | Refresh Ccw 04 | | | dsi-refresh-ccw-04-line dsi-refresh-ccw-04-solid | | Refresh Ccw 05 | | | dsi-refresh-ccw-05-line dsi-refresh-ccw-05-solid | | Refresh Cw 01 | | | dsi-refresh-cw-01-line dsi-refresh-cw-01-solid | | Refresh Cw 02 | | | dsi-refresh-cw-02-line dsi-refresh-cw-02-solid | | Refresh Cw 03 | | | dsi-refresh-cw-03-line dsi-refresh-cw-03-solid | | Refresh Cw 04 | | | dsi-refresh-cw-04-line dsi-refresh-cw-04-solid | | Refresh Cw 05 | | | dsi-refresh-cw-05-line dsi-refresh-cw-05-solid | | Repeat 01 | | | dsi-repeat-01-line dsi-repeat-01-solid | | Repeat 02 | | | dsi-repeat-02-line dsi-repeat-02-solid | | Repeat 03 | | | dsi-repeat-03-line dsi-repeat-03-solid | | Repeat 04 | | | dsi-repeat-04-line dsi-repeat-04-solid | | Search Lg | | | dsi-search-lg-line dsi-search-lg-solid | | Search Md | | | dsi-search-md-line dsi-search-md-solid | | Search Refraction | | | dsi-search-refraction-line dsi-search-refraction-solid | | Search Sm | | | dsi-search-sm-line dsi-search-sm-solid | | Settings 01 | | | dsi-settings-01-line dsi-settings-01-solid | | Settings 02 | | | dsi-settings-02-line dsi-settings-02-solid | | Settings 03 | | | dsi-settings-03-line dsi-settings-03-solid | | Settings 04 | | | dsi-settings-04-line dsi-settings-04-solid | | Star 01 | | | dsi-star-01-line dsi-star-01-solid | | Star 02 | | | dsi-star-02-line dsi-star-02-solid | | Star 03 | | | dsi-star-03-line dsi-star-03-solid | | Star 04 | | | dsi-star-04-line dsi-star-04-solid | | Star 05 | | | dsi-star-05-line dsi-star-05-solid | | Star 06 | | | dsi-star-06-line dsi-star-06-solid | | Star 07 | | | dsi-star-07-line dsi-star-07-solid | | Stars 01 | | | dsi-stars-01-line dsi-stars-01-solid | | Stars 02 | | | dsi-stars-02-line dsi-stars-02-solid | | Stars 03 | | | dsi-stars-03-line dsi-stars-03-solid | | Ticket 01 | | | dsi-ticket-01-line dsi-ticket-01-solid | | Ticket 02 | | | dsi-ticket-02-line dsi-ticket-02-solid | | Trash 01 | | | dsi-trash-01-line dsi-trash-01-solid | | Trash 02 | | | dsi-trash-02-line dsi-trash-02-solid | | Trash 03 | | | dsi-trash-03-line dsi-trash-03-solid | | Trash 04 | | | dsi-trash-04-line dsi-trash-04-solid | | Upload 01 | | | dsi-upload-01-line dsi-upload-01-solid | | Upload 02 | | | dsi-upload-02-line dsi-upload-02-solid | | Upload 03 | | | dsi-upload-03-line dsi-upload-03-solid | | Upload 04 | | | dsi-upload-04-line dsi-upload-04-solid | | Upload Cloud 01 | | | dsi-upload-cloud-01-line dsi-upload-cloud-01-solid | | Upload Cloud 02 | | | dsi-upload-cloud-02-line dsi-upload-cloud-02-solid | | User 01 | | | dsi-user-01-line dsi-user-01-solid | | User 02 | | | dsi-user-02-line dsi-user-02-solid | | User 03 | | | dsi-user-03-line dsi-user-03-solid | | User Check 01 | | | dsi-user-check-01-line dsi-user-check-01-solid | | User Check 02 | | | dsi-user-check-02-line dsi-user-check-02-solid | | User Circle | | | dsi-user-circle-line dsi-user-circle-solid | | User Down 01 | | | dsi-user-down-01-line dsi-user-down-01-solid | | User Down 02 | | | dsi-user-down-02-line dsi-user-down-02-solid | | User Edit | | | dsi-user-edit-line dsi-user-edit-solid | | User Left 01 | | | dsi-user-left-01-line dsi-user-left-01-solid | | User Left 02 | | | dsi-user-left-02-line dsi-user-left-02-solid | | User Minus 01 | | | dsi-user-minus-01-line dsi-user-minus-01-solid | | User Minus 02 | | | dsi-user-minus-02-line dsi-user-minus-02-solid | | User Plus 01 | | | dsi-user-plus-01-line dsi-user-plus-01-solid | | User Plus 02 | | | dsi-user-plus-02-line dsi-user-plus-02-solid | | User Right 01 | | | dsi-user-right-01-line dsi-user-right-01-solid | | User Right 02 | | | dsi-user-right-02-line dsi-user-right-02-solid | | User Square | | | dsi-user-square-line dsi-user-square-solid | | User Up 01 | | | dsi-user-up-01-line dsi-user-up-01-solid | | User Up 02 | | | dsi-user-up-02-line dsi-user-up-02-solid | | User X 01 | | | dsi-user-x-01-line dsi-user-x-01-solid | | User X 02 | | | dsi-user-x-02-line dsi-user-x-02-solid | | Users 01 | | | dsi-users-01-line dsi-users-01-solid | | Users 02 | | | dsi-users-02-line dsi-users-02-solid | | Users 03 | | | dsi-users-03-line dsi-users-03-solid | | Users Check | | | dsi-users-check-line dsi-users-check-solid | | Users Down | | | dsi-users-down-line dsi-users-down-solid | | Users Edit | | | dsi-users-edit-line dsi-users-edit-solid | | Users Left | | | dsi-users-left-line dsi-users-left-solid | | Users Minus | | | dsi-users-minus-line dsi-users-minus-solid | | Users Plus | | | dsi-users-plus-line dsi-users-plus-solid | | Users Right | | | dsi-users-right-line dsi-users-right-solid | | Users Up | | | dsi-users-up-line dsi-users-up-solid | | Users X | | | dsi-users-x-line dsi-users-x-solid | | View Off | | - | dsi-view-off-line | | Wifi | | | dsi-wifi-line dsi-wifi-solid | | Wifi Off | | | dsi-wifi-off-line dsi-wifi-off-solid | | X | | | dsi-x-line dsi-x-solid | | X Square | | | dsi-x-square-line dsi-x-square-solid |

Use any color from the design system:

<!-- Dynamic colors -->
<i class="dsi dsi-activity-line dsi-brand-600"></i>
<i class="dsi dsi-activity-line dsi-primary-600"></i>
<i class="dsi dsi-activity-line dsi-primary-700"></i>
<i class="dsi dsi-activity-line dsi-secondary-600"></i>
<i class="dsi dsi-activity-line dsi-functional-600"></i>
<i class="dsi dsi-activity-line dsi-utility-600"></i>

<!-- Theme colors -->
<i class="dsi dsi-activity-heart-solid dsi-theme-red-600"></i>
<i class="dsi dsi-anchor-line dsi-theme-blue-600"></i>
<i class="dsi dsi-activity-line dsi-theme-green-600"></i>
<i class="dsi dsi-activity-line dsi-theme-violet-600"></i>

<!-- Neutral shades -->
<i class="dsi dsi-activity-line dsi-neutral-900"></i>
<i class="dsi dsi-activity-line dsi-neutral-600"></i>
<i class="dsi dsi-activity-line dsi-neutral-300"></i>

<!-- Or use CSS variables for custom colors -->
<i class="dsi dsi-activity-line" style="color: var(--primary-600)"></i>

<i class="dsi dsi-activity-line dsi-xs"></i>
<!-- 0.75em / 12px -->
<i class="dsi dsi-activity-line dsi-sm"></i>
<!-- 0.875em / 14px -->
<i class="dsi dsi-activity-line"></i>
<!-- 1em / 16px (default) -->
<i class="dsi dsi-activity-line dsi-lg"></i>
<!-- 1.25em / 20px -->
<i class="dsi dsi-activity-line dsi-xl"></i>
<!-- 1.5em / 24px -->
<i class="dsi dsi-activity-line dsi-2x"></i>
<!-- 2em / 32px -->
<i class="dsi dsi-activity-line dsi-3x"></i>
<!-- 3em / 48px -->

Icons scale with font-size, so they automatically adapt to their container's text size.

<!-- Spinning animation (360° rotation) -->
<i class="dsi dsi-activity-line dsi-spin"></i>

<!-- Pulsing animation (opacity fade) -->
<i class="dsi dsi-activity-heart-solid dsi-pulse"></i>

<!-- Combined with colors and sizes -->
<i class="dsi dsi-activity-line dsi-primary-600 dsi-2x dsi-spin"></i>

<!-- Button with icon -->
<button class="btn btn-primary">
  <i class="dsi dsi-activity-heart-solid"></i>
  Like
</button>

<!-- Loading state -->
<div class="loading">
  <i class="dsi dsi-activity-line dsi-spin dsi-primary-600 dsi-lg"></i>
  <span>Loading...</span>
</div>

<!-- Success alert -->
<div class="alert alert-success">
  <i class="dsi dsi-activity-heart-solid dsi-theme-green-600 dsi-xl"></i>
  <span>Operation completed successfully!</span>
</div>

<!-- Error alert -->
<div class="alert alert-error">
  <i class="dsi dsi-anchor-solid dsi-theme-red-600 dsi-xl"></i>
  <span>Connection failed. Please try again.</span>
</div>

<!-- Navigation item with icon -->
<a href="/dashboard" class="nav-item">
  <i class="dsi dsi-activity-line dsi-neutral-600"></i>
  <span>Dashboard</span>
</a>

<!-- Status indicator -->
<div class="status">
  <i class="dsi dsi-activity-heart-solid dsi-theme-green-600 dsi-pulse"></i>
  <span>Online</span>
</div>

<!-- Icon in heading -->
<h2>
  <i class="dsi dsi-anchor-line dsi-primary-600"></i>
  Documentation
</h2>

📚 Complete Icon Documentation:

• Full Icon System Guide
• Icon Quick Start
• Icon Cheat Sheet

Color System

Each color type (brand, primary, secondary, etc.) generates **14 sha