dynamic-ds 1.0.1 → 1.0.3

package/README.md

@@ -1,80 +1,195 @@
 # Dynamic-DS - Dynamic Design System
 
+> **Modern Angular Design System** with dynamic theming, color customization, and icon system
+
 [English](#english) | [Tiếng Việt](#tiếng-việt)
 
 ---
 
 ## English
 
-### 📖 Overview
+### Table of Contents
+
+- [Overview](#overview)
+- [Key Features](#key-features)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Usage](#usage)
+- [Icon System (DSI)](#icon-system-dsi)
+  - [Available Icons](#available-icons)
+  - [Basic Icon Usage](#basic-icon-usage)
+  - [Icon Colors](#icon-colors)
+  - [Icon Sizes](#icon-sizes)
+  - [Icon Animations](#icon-animations)
+  - [Real-World Examples](#real-world-examples)
+- [Color System](#color-system)
+- [Semantic Classes Reference](#semantic-classes-reference)
+- [Utility Classes](#utility-classes)
+- [API Reference](#api-reference)
+- [Additional Resources](#additional-resources)
+- [Best Practices](#best-practices)
+- [Migration Guide](#migration-guide)
+- [Troubleshooting](#troubleshooting)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+
+### Overview
 
-**Dynamic-DS (Dynamic Design System)** is an Angular library that provides a comprehensive design system with dynamic theming capabilities. It allows applications to customize brand colors while maintaining a consistent design language across all components.
+**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
+### 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
 - **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
+### Installation
 
 ```bash
 npm install dynamic-ds
 ```
 
-### 🚀 Quick Start
+### Quick Start
 
-#### 1. Import Styles
+Follow these steps to integrate Dynamic-DS into your Angular application:
+
+<details open>
+<summary><strong>Step 1: Import Styles</strong></summary>
 
 Add the design system styles to your `angular.json`:
 
 ```json
 {
-  "styles": [
-    "node_modules/dynamic-ds/styles/system-design.scss"
-  ]
+  "projects": {
+    "your-app": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": ["node_modules/dynamic-ds/styles/system-design.scss", "src/styles.scss"]
+          }
+        }
+      }
+    }
+  }
 }
 ```
 
-#### 2. Provide Configuration (Optional)
+Or import directly in your `styles.scss`:
+
+```scss
+@import "dynamic-ds/styles/system-design.scss";
+```
+
+</details>
 
-In your `app.config.ts` or module:
+<details open>
+<summary><strong>Step 2: Configure Theme Colors (Optional)</strong></summary>
+
+#### For Module-based Apps
+
+In your `app.module.ts`:
+
+```typescript
+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`:
 
 ```typescript
-import { ApplicationConfig } from '@angular/core';
-import { SYSTEM_DESIGN_CONFIG } from 'dynamic-ds';
+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'
-      }
-    }
-  ]
+        brand: "#2740B4",
+        primary: "#006BDF",
+        secondary: "#9F5100",
+        functional: "#006BDF",
+        utility: "#CF0026",
+      },
+    },
+  ],
 };
 ```
 
-#### 3. Initialize Theme
+</details>
+
+<details open>
+<summary><strong>Step 3: Initialize Theme Service</strong></summary>
+
+In your `app.component.ts`:
+
+```typescript
+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();
+  }
+}
+```
+
+</details>
+
+**That's it!** You're ready to use Dynamic-DS components and utilities.
 
 In your `app.component.ts`:
 
 ```typescript
-import { Component, inject, OnInit } from '@angular/core';
-import { DynamicDsService } from 'dynamic-ds';
+import { Component, inject, OnInit } from "@angular/core";
+import { DynamicDsService } from "dynamic-ds";
 
 @Component({
-  selector: 'app-root',
-  template: `...`
+  selector: "app-root",
+  template: `...`,
 })
 export class AppComponent implements OnInit {
   private themeService = inject(DynamicDsService);
@@ -86,55 +201,150 @@ export class AppComponent implements OnInit {
 }
 ```
 
-### 🎨 Usage
+### Usage
+
+Dynamic-DS provides multiple ways to style your components:
+
+<details open>
+<summary><strong>1. Using Semantic CSS Classes</strong></summary>
 
-#### Using CSS Classes
+The easiest way to apply design system colors:
 
 ```html
 <!-- Background colors -->
-<div class="bg-primary-canvas">Lightest background</div>
-<div class="bg-primary-soft">Soft background</div>
-<div class="bg-primary-accent">Accent background</div>
+<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 text</p>
+<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-sub">Primary border</div>
+<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`
+
+</details>
+
+<details open>
+<summary><strong>2. Using Direct Color Utilities</strong></summary>
 
-<!-- Direct color utilities -->
-<div class="color-bg-primary-500">Primary 500 background</div>
+For precise color control with shade numbers:
+
+```html
+<!-- 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>
 ```
 
-#### Using CSS Variables
+**Available shades:** 10, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 850, 875, 900
+
+</details>
+
+<details open>
+<summary><strong>3. Using CSS Variables</strong></summary>
+
+For advanced styling in your component SCSS/CSS files:
 
 ```scss
 .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));
 }
 
-// With alpha transparency
-.overlay {
-  background-color: rgba(var(--primary-600-rgb), 0.5);
+// Hover states
+.button:hover {
+  background-color: var(--primary-700);
+  border-color: var(--primary-800);
 }
 ```
 
-#### Dynamic Color Updates
+**All available CSS variables:**
+
+```scss
+// 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}
+```
+
+</details>
+
+<details open>
+<summary><strong>4. Dynamic Color Updates</strong></summary>
+
+Update theme colors at runtime programmatically:
 
 ```typescript
-import { DynamicDsService } from 'dynamic-ds';
+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 {
-  constructor(private themeService: DynamicDsService) {}
+  private themeService = inject(DynamicDsService);
 
   updateTheme() {
     this.themeService.updateSystemDesignColor({
-      primaryColor: '#FF5733',
-      secondaryColor: '#33FF57'
+      primaryColor: "#FF5733",
+      secondaryColor: "#33FF57",
+      brandColor: "#9C27B0",
     });
   }
 
@@ -145,75 +355,561 @@ export class SettingsComponent {
   getCurrentColors() {
     const colors = this.themeService.getCurrentColors();
     console.log(colors);
-    // { brand: '#...', primary: '#...', secondary: '#...', ... }
+    // Output: { brand: '#...', primary: '#...', secondary: '#...', ... }
   }
 }
 ```
 
-### 🎯 Color Palettes
-
-Each color type generates 14 shades:
-
-| Shade | Usage | Mix Ratio |
-|-------|-------|-----------|
-| 900 | Darkest | -73.5% black |
-| 875 | Very dark | -62.5% black |
-| 850 | Darker | -47.0% black |
-| 800 | Dark | -34.5% black |
-| 700 | Medium dark | -18.5% black |
-| 600 | **Base color** | 0% |
-| 500 | Medium light | +17.5% white |
-| 400 | Light | +33.0% white |
-| 300 | Lighter | +53.0% white |
-| 200 | Very light | +72.0% white |
-| 100 | Ultra light | +85.0% white |
-| 50 | Canvas | +89.5% white |
-| 25 | Soft | +93.5% white |
-| 10 | Lightest | +97.0% white |
-
-### 🏷️ Semantic Classes
-
-#### Backgrounds
-- `.bg-{type}-canvas` - Lightest background
-- `.bg-{type}-soft` - Soft background
-- `.bg-{type}-sub` - Subtle background
-- `.bg-{type}-accent` - Accent/primary background
-
-#### Text
-- `.text-{type}-soft` - Soft text color
-- `.text-{type}-sub` - Subtle text color
-- `.text-{type}-strong` - Strong/bold text color
-- `.text-{type}-white` - White text
-
-#### Strokes (Borders)
-- `.stroke-{type}-soft` - Soft border
-- `.stroke-{type}-sub` - Subtle border
-- `.stroke-{type}-strong` - Strong border
-- `.stroke-{type}-strong-alpha` - 50% opacity border
+</details>
 
-#### Icons
-- `.icon-{type}-soft` - Soft icon color
-- `.icon-{type}-sub` - Subtle icon color
-- `.icon-{type}-strong` - Strong icon color
-- `.icon-{type}-white` - White icon
+---
 
-*Where `{type}` can be: `brand`, `primary`, `secondary`, `functional`, `utility`, `neutral`, or badge themes like `red`, `blue`, `green`, etc.*
+### Icon System (DSI)
 
-### 🎨 Badge Theme Colors
+**Dynamic-DS** includes a powerful icon system similar to Bootstrap Icons, with full color customization support using CSS mask technique.
 
-Pre-defined badge/tag color themes:
-- `neutral`, `neutral-light`
-- `red`, `orange`, `yellow`
-- `lime`, `green`, `ocean`
-- `blue`, `indigo`, `violet`, `pink`
+<details open>
+<summary><strong>Basic Icon Usage</strong></summary>
 
-Example:
 ```html
-<span class="bg-blue-soft text-blue-strong stroke-blue-sub">Blue Badge</span>
-<span class="bg-green-canvas text-green-strong">Success</span>
+<!-- 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>
 ```
 
-### 📐 Sizing Utilities
+</details>
+
+<details open>
+<summary><strong>Available Icons</strong></summary>
+
+The library includes **117 icons** with both line and solid versions. Below is the complete list:
+
+#### Activity & Status Icons
+
+| Icon           | Line                                        | Solid                                        | Class Names                                          |
+| -------------- | ------------------------------------------- | -------------------------------------------- | ---------------------------------------------------- |
+| Activity       | ![](src/lib/assets/activity/line.svg)       | ![](src/lib/assets/activity/solid.svg)       | `dsi-activity-line` `dsi-activity-solid`             |
+| Activity Heart | ![](src/lib/assets/activity-heart/line.svg) | ![](src/lib/assets/activity-heart/solid.svg) | `dsi-activity-heart-line` `dsi-activity-heart-solid` |
+| Check Circle   | ![](src/lib/assets/check-circle/line.svg)   | ![](src/lib/assets/check-circle/solid.svg)   | `dsi-check-circle-line` `dsi-check-circle-solid`     |
+| Check Square   | ![](src/lib/assets/check-square/line.svg)   | ![](src/lib/assets/check-square/solid.svg)   | `dsi-check-square-line` `dsi-check-square-solid`     |
+| Info Circle    | ![](src/lib/assets/info-circle/line.svg)    | ![](src/lib/assets/info-circle/solid.svg)    | `dsi-info-circle-line` `dsi-info-circle-solid`       |
+| X Close        | ![](src/lib/assets/x-close/line.svg)        | ![](src/lib/assets/x-close/solid.svg)        | `dsi-x-close-line` `dsi-x-close-solid`               |
+
+#### Navigation Icons
+
+| Icon       | Line                                    | Solid                                    | Class Names                                  |
+| ---------- | --------------------------------------- | ---------------------------------------- | -------------------------------------------- |
+| Anchor     | ![](src/lib/assets/anchor/line.svg)     | ![](src/lib/assets/anchor/solid.svg)     | `dsi-anchor-line` `dsi-anchor-solid`         |
+| Home 01    | ![](src/lib/assets/home-01/line.svg)    | ![](src/lib/assets/home-01/solid.svg)    | `dsi-home-01-line` `dsi-home-01-solid`       |
+| Home 02    | ![](src/lib/assets/home-02/line.svg)    | ![](src/lib/assets/home-02/solid.svg)    | `dsi-home-02-line` `dsi-home-02-solid`       |
+| Home 03    | ![](src/lib/assets/home-03/line.svg)    | ![](src/lib/assets/home-03/solid.svg)    | `dsi-home-03-line` `dsi-home-03-solid`       |
+| Home 04    | ![](src/lib/assets/home-04/line.svg)    | ![](src/lib/assets/home-04/solid.svg)    | `dsi-home-04-line` `dsi-home-04-solid`       |
+| Home 05    | ![](src/lib/assets/home-05/line.svg)    | ![](src/lib/assets/home-05/solid.svg)    | `dsi-home-05-line` `dsi-home-05-solid`       |
+| Home Line  | ![](src/lib/assets/home-line/line.svg)  | ![](src/lib/assets/home-line/solid.svg)  | `dsi-home-line-line` `dsi-home-line-solid`   |
+| Home Smile | ![](src/lib/assets/home-smile/line.svg) | ![](src/lib/assets/home-smile/solid.svg) | `dsi-home-smile-line` `dsi-home-smile-solid` |
+
+#### Arrow Icons
+
+| Icon             | Line                                          | Solid                                          | Class Names                                              |
+| ---------------- | --------------------------------------------- | ---------------------------------------------- | -------------------------------------------------------- |
+| Arrow Up         | ![](src/lib/assets/arrow-up/line.svg)         | ![](src/lib/assets/arrow-up/solid.svg)         | `dsi-arrow-up-line` `dsi-arrow-up-solid`                 |
+| Arrow Down       | ![](src/lib/assets/arrow-down/line.svg)       | ![](src/lib/assets/arrow-down/solid.svg)       | `dsi-arrow-down-line` `dsi-arrow-down-solid`             |
+| Arrow Left       | ![](src/lib/assets/arrow-left/line.svg)       | ![](src/lib/assets/arrow-left/solid.svg)       | `dsi-arrow-left-line` `dsi-arrow-left-solid`             |
+| Arrow Right      | ![](src/lib/assets/arrow-right/line.svg)      | ![](src/lib/assets/arrow-right/solid.svg)      | `dsi-arrow-right-line` `dsi-arrow-right-solid`           |
+| Arrow Up Left    | ![](src/lib/assets/arrow-up-left/line.svg)    | ![](src/lib/assets/arrow-up-left/solid.svg)    | `dsi-arrow-up-left-line` `dsi-arrow-up-left-solid`       |
+| Arrow Up Right   | ![](src/lib/assets/arrow-up-right/line.svg)   | ![](src/lib/assets/arrow-up-right/solid.svg)   | `dsi-arrow-up-right-line` `dsi-arrow-up-right-solid`     |
+| Arrow Down Left  | ![](src/lib/assets/arrow-down-left/line.svg)  | ![](src/lib/assets/arrow-down-left/solid.svg)  | `dsi-arrow-down-left-line` `dsi-arrow-down-left-solid`   |
+| Arrow Down Right | ![](src/lib/assets/arrow-down-right/line.svg) | ![](src/lib/assets/arrow-down-right/solid.svg) | `dsi-arrow-down-right-line` `dsi-arrow-down-right-solid` |
+
+#### Arrow Circle Icons
+
+| Icon                    | Line                                                 | Solid                                                 | Class Names                                                            |
+| ----------------------- | ---------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------- |
+| Arrow Circle Up         | ![](src/lib/assets/arrow-circle-up/line.svg)         | ![](src/lib/assets/arrow-circle-up/solid.svg)         | `dsi-arrow-circle-up-line` `dsi-arrow-circle-up-solid`                 |
+| Arrow Circle Down       | ![](src/lib/assets/arrow-circle-down/line.svg)       | ![](src/lib/assets/arrow-circle-down/solid.svg)       | `dsi-arrow-circle-down-line` `dsi-arrow-circle-down-solid`             |
+| Arrow Circle Left       | ![](src/lib/assets/arrow-circle-left/line.svg)       | ![](src/lib/assets/arrow-circle-left/solid.svg)       | `dsi-arrow-circle-left-line` `dsi-arrow-circle-left-solid`             |
+| Arrow Circle Right      | ![](src/lib/assets/arrow-circle-right/line.svg)      | ![](src/lib/assets/arrow-circle-right/solid.svg)      | `dsi-arrow-circle-right-line` `dsi-arrow-circle-right-solid`           |
+| Arrow Circle Up Left    | ![](src/lib/assets/arrow-circle-up-left/line.svg)    | ![](src/lib/assets/arrow-circle-up-left/solid.svg)    | `dsi-arrow-circle-up-left-line` `dsi-arrow-circle-up-left-solid`       |
+| Arrow Circle Up Right   | ![](src/lib/assets/arrow-circle-up-right/line.svg)   | ![](src/lib/assets/arrow-circle-up-right/solid.svg)   | `dsi-arrow-circle-up-right-line` `dsi-arrow-circle-up-right-solid`     |
+| Arrow Circle Down Left  | ![](src/lib/assets/arrow-circle-down-left/line.svg)  | ![](src/lib/assets/arrow-circle-down-left/solid.svg)  | `dsi-arrow-circle-down-left-line` `dsi-arrow-circle-down-left-solid`   |
+| Arrow Circle Down Right | ![](src/lib/assets/arrow-circle-down-right/line.svg) | ![](src/lib/assets/arrow-circle-down-right/solid.svg) | `dsi-arrow-circle-down-right-line` `dsi-arrow-circle-down-right-solid` |
+
+#### Arrow Square Icons
+
+| Icon                    | Line                                                 | Solid                                                 | Class Names                                                            |
+| ----------------------- | ---------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------- |
+| Arrow Square Up         | ![](src/lib/assets/arrow-square-up/line.svg)         | ![](src/lib/assets/arrow-square-up/solid.svg)         | `dsi-arrow-square-up-line` `dsi-arrow-square-up-solid`                 |
+| Arrow Square Down       | ![](src/lib/assets/arrow-square-down/line.svg)       | ![](src/lib/assets/arrow-square-down/solid.svg)       | `dsi-arrow-square-down-line` `dsi-arrow-square-down-solid`             |
+| Arrow Square Left       | ![](src/lib/assets/arrow-square-left/line.svg)       | ![](src/lib/assets/arrow-square-left/solid.svg)       | `dsi-arrow-square-left-line` `dsi-arrow-square-left-solid`             |
+| Arrow Square Right      | ![](src/lib/assets/arrow-square-right/line.svg)      | ![](src/lib/assets/arrow-square-right/solid.svg)      | `dsi-arrow-square-right-line` `dsi-arrow-square-right-solid`           |
+| Arrow Square Up Left    | ![](src/lib/assets/arrow-square-up-left/line.svg)    | ![](src/lib/assets/arrow-square-up-left/solid.svg)    | `dsi-arrow-square-up-left-line` `dsi-arrow-square-up-left-solid`       |
+| Arrow Square Up Right   | ![](src/lib/assets/arrow-square-up-right/line.svg)   | ![](src/lib/assets/arrow-square-up-right/solid.svg)   | `dsi-arrow-square-up-right-line` `dsi-arrow-square-up-right-solid`     |
+| Arrow Square Down Left  | ![](src/lib/assets/arrow-square-down-left/line.svg)  | ![](src/lib/assets/arrow-square-down-left/solid.svg)  | `dsi-arrow-square-down-left-line` `dsi-arrow-square-down-left-solid`   |
+| Arrow Square Down Right | ![](src/lib/assets/arrow-square-down-right/line.svg) | ![](src/lib/assets/arrow-square-down-right/solid.svg) | `dsi-arrow-square-down-right-line` `dsi-arrow-square-down-right-solid` |
+
+#### Arrow Block Icons
+
+| Icon              | Line                                           | Solid                                           | Class Names                                                |
+| ----------------- | ---------------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------- |
+| Arrow Block Up    | ![](src/lib/assets/arrow-block-up/line.svg)    | ![](src/lib/assets/arrow-block-up/solid.svg)    | `dsi-arrow-block-up-line` `dsi-arrow-block-up-solid`       |
+| Arrow Block Down  | ![](src/lib/assets/arrow-block-down/line.svg)  | ![](src/lib/assets/arrow-block-down/solid.svg)  | `dsi-arrow-block-down-line` `dsi-arrow-block-down-solid`   |
+| Arrow Block Left  | ![](src/lib/assets/arrow-block-left/line.svg)  | ![](src/lib/assets/arrow-block-left/solid.svg)  | `dsi-arrow-block-left-line` `dsi-arrow-block-left-solid`   |
+| Arrow Block Right | ![](src/lib/assets/arrow-block-right/line.svg) | ![](src/lib/assets/arrow-block-right/solid.svg) | `dsi-arrow-block-right-line` `dsi-arrow-block-right-solid` |
+
+#### Arrow Narrow Icons
+
+| Icon                    | Line                                                 | Solid                                                 | Class Names                                                            |
+| ----------------------- | ---------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------- |
+| Arrow Narrow Up         | ![](src/lib/assets/arrow-narrow-up/line.svg)         | ![](src/lib/assets/arrow-narrow-up/solid.svg)         | `dsi-arrow-narrow-up-line` `dsi-arrow-narrow-up-solid`                 |
+| Arrow Narrow Down       | ![](src/lib/assets/arrow-narrow-down/line.svg)       | ![](src/lib/assets/arrow-narrow-down/solid.svg)       | `dsi-arrow-narrow-down-line` `dsi-arrow-narrow-down-solid`             |
+| Arrow Narrow Left       | ![](src/lib/assets/arrow-narrow-left/line.svg)       | ![](src/lib/assets/arrow-narrow-left/solid.svg)       | `dsi-arrow-narrow-left-line` `dsi-arrow-narrow-left-solid`             |
+| Arrow Narrow Right      | ![](src/lib/assets/arrow-narrow-right/line.svg)      | ![](src/lib/assets/arrow-narrow-right/solid.svg)      | `dsi-arrow-narrow-right-line` `dsi-arrow-narrow-right-solid`           |
+| Arrow Narrow Up Left    | ![](src/lib/assets/arrow-narrow-up-left/line.svg)    | ![](src/lib/assets/arrow-narrow-up-left/solid.svg)    | `dsi-arrow-narrow-up-left-line` `dsi-arrow-narrow-up-left-solid`       |
+| Arrow Narrow Up Right   | ![](src/lib/assets/arrow-narrow-up-right/line.svg)   | ![](src/lib/assets/arrow-narrow-up-right/solid.svg)   | `dsi-arrow-narrow-up-right-line` `dsi-arrow-narrow-up-right-solid`     |
+| Arrow Narrow Down Left  | ![](src/lib/assets/arrow-narrow-down-left/line.svg)  | ![](src/lib/assets/arrow-narrow-down-left/solid.svg)  | `dsi-arrow-narrow-down-left-line` `dsi-arrow-narrow-down-left-solid`   |
+| Arrow Narrow Down Right | ![](src/lib/assets/arrow-narrow-down-right/line.svg) | ![](src/lib/assets/arrow-narrow-down-right/solid.svg) | `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         | ![](src/lib/assets/arrow-circle-broken-up/line.svg)         | ![](src/lib/assets/arrow-circle-broken-up/solid.svg)         | `dsi-arrow-circle-broken-up-line` `dsi-arrow-circle-broken-up-solid`                 |
+| Arrow Circle Broken Down       | ![](src/lib/assets/arrow-circle-broken-down/line.svg)       | ![](src/lib/assets/arrow-circle-broken-down/solid.svg)       | `dsi-arrow-circle-broken-down-line` `dsi-arrow-circle-broken-down-solid`             |
+| Arrow Circle Broken Left       | ![](src/lib/assets/arrow-circle-broken-left/line.svg)       | ![](src/lib/assets/arrow-circle-broken-left/solid.svg)       | `dsi-arrow-circle-broken-left-line` `dsi-arrow-circle-broken-left-solid`             |
+| Arrow Circle Broken Right      | ![](src/lib/assets/arrow-circle-broken-right/line.svg)      | ![](src/lib/assets/arrow-circle-broken-right/solid.svg)      | `dsi-arrow-circle-broken-right-line` `dsi-arrow-circle-broken-right-solid`           |
+| Arrow Circle Broken Up Left    | ![](src/lib/assets/arrow-circle-broken-up-left/line.svg)    | ![](src/lib/assets/arrow-circle-broken-up-left/solid.svg)    | `dsi-arrow-circle-broken-up-left-line` `dsi-arrow-circle-broken-up-left-solid`       |
+| Arrow Circle Broken Up Right   | ![](src/lib/assets/arrow-circle-broken-up-right/line.svg)   | ![](src/lib/assets/arrow-circle-broken-up-right/solid.svg)   | `dsi-arrow-circle-broken-up-right-line` `dsi-arrow-circle-broken-up-right-solid`     |
+| Arrow Circle Broken Down Left  | ![](src/lib/assets/arrow-circle-broken-down-left/line.svg)  | ![](src/lib/assets/arrow-circle-broken-down-left/solid.svg)  | `dsi-arrow-circle-broken-down-left-line` `dsi-arrow-circle-broken-down-left-solid`   |
+| Arrow Circle Broken Down Right | ![](src/lib/assets/arrow-circle-broken-down-right/line.svg) | ![](src/lib/assets/arrow-circle-broken-down-right/solid.svg) | `dsi-arrow-circle-broken-down-right-line` `dsi-arrow-circle-broken-down-right-solid` |
+
+#### Multiple Arrows Icons
+
+| Icon            | Line                                         | Solid                                         | Class Names                                            |
+| --------------- | -------------------------------------------- | --------------------------------------------- | ------------------------------------------------------ |
+| Arrows Up       | ![](src/lib/assets/arrows-up/line.svg)       | ![](src/lib/assets/arrows-up/solid.svg)       | `dsi-arrows-up-line` `dsi-arrows-up-solid`             |
+| Arrows Down     | ![](src/lib/assets/arrows-down/line.svg)     | ![](src/lib/assets/arrows-down/solid.svg)     | `dsi-arrows-down-line` `dsi-arrows-down-solid`         |
+| Arrows Left     | ![](src/lib/assets/arrows-left/line.svg)     | ![](src/lib/assets/arrows-left/solid.svg)     | `dsi-arrows-left-line` `dsi-arrows-left-solid`         |
+| Arrows Right    | ![](src/lib/assets/arrows-right/line.svg)    | ![](src/lib/assets/arrows-right/solid.svg)    | `dsi-arrows-right-line` `dsi-arrows-right-solid`       |
+| Arrows Triangle | ![](src/lib/assets/arrows-triangle/line.svg) | ![](src/lib/assets/arrows-triangle/solid.svg) | `dsi-arrows-triangle-line` `dsi-arrows-triangle-solid` |
+
+#### Mail Icons
+
+| Icon    | Line                                 | Solid                                 | Class Names                            |
+| ------- | ------------------------------------ | ------------------------------------- | -------------------------------------- |
+| Mail 01 | ![](src/lib/assets/mail-01/line.svg) | ![](src/lib/assets/mail-01/solid.svg) | `dsi-mail-01-line` `dsi-mail-01-solid` |
+| Mail 02 | ![](src/lib/assets/mail-02/line.svg) | ![](src/lib/assets/mail-02/solid.svg) | `dsi-mail-02-line` `dsi-mail-02-solid` |
+| Mail 03 | ![](src/lib/assets/mail-03/line.svg) | ![](src/lib/assets/mail-03/solid.svg) | `dsi-mail-03-line` `dsi-mail-03-solid` |
+| Mail 04 | ![](src/lib/assets/mail-04/line.svg) | ![](src/lib/assets/mail-04/solid.svg) | `dsi-mail-04-line` `dsi-mail-04-solid` |
+| Mail 05 | ![](src/lib/assets/mail-05/line.svg) | ![](src/lib/assets/mail-05/solid.svg) | `dsi-mail-05-line` `dsi-mail-05-solid` |
+
+#### Notification Icons
+
+| Icon                        | Line                                                     | Solid                                                     | Class Names                                                                    |
+| --------------------------- | -------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| Notification Box            | ![](src/lib/assets/notification-box/line.svg)            | ![](src/lib/assets/notification-box/solid.svg)            | `dsi-notification-box-line` `dsi-notification-box-solid`                       |
+| Notification Message        | ![](src/lib/assets/notification-message/line.svg)        | ![](src/lib/assets/notification-message/solid.svg)        | `dsi-notification-message-line` `dsi-notification-message-solid`               |
+| Notification Text           | ![](src/lib/assets/notification-text/line.svg)           | ![](src/lib/assets/notification-text/solid.svg)           | `dsi-notification-text-line` `dsi-notification-text-solid`                     |
+| Message Notification Circle | ![](src/lib/assets/message-notification-circle/line.svg) | ![](src/lib/assets/message-notification-circle/solid.svg) | `dsi-message-notification-circle-line` `dsi-message-notification-circle-solid` |
+| Message Notification Square | ![](src/lib/assets/message-notification-square/line.svg) | ![](src/lib/assets/message-notification-square/solid.svg) | `dsi-message-notification-square-line` `dsi-message-notification-square-solid` |
+
+#### Star Icons
+
+| Icon     | Line                                  | Solid                                  | Class Names                              |
+| -------- | ------------------------------------- | -------------------------------------- | ---------------------------------------- |
+| Star 01  | ![](src/lib/assets/star-01/line.svg)  | ![](src/lib/assets/star-01/solid.svg)  | `dsi-star-01-line` `dsi-star-01-solid`   |
+| Star 02  | ![](src/lib/assets/star-02/line.svg)  | ![](src/lib/assets/star-02/solid.svg)  | `dsi-star-02-line` `dsi-star-02-solid`   |
+| Star 03  | ![](src/lib/assets/star-03/line.svg)  | ![](src/lib/assets/star-03/solid.svg)  | `dsi-star-03-line` `dsi-star-03-solid`   |
+| Star 04  | ![](src/lib/assets/star-04/line.svg)  | ![](src/lib/assets/star-04/solid.svg)  | `dsi-star-04-line` `dsi-star-04-solid`   |
+| Star 05  | ![](src/lib/assets/star-05/line.svg)  | ![](src/lib/assets/star-05/solid.svg)  | `dsi-star-05-line` `dsi-star-05-solid`   |
+| Star 06  | ![](src/lib/assets/star-06/line.svg)  | ![](src/lib/assets/star-06/solid.svg)  | `dsi-star-06-line` `dsi-star-06-solid`   |
+| Star 07  | ![](src/lib/assets/star-07/line.svg)  | ![](src/lib/assets/star-07/solid.svg)  | `dsi-star-07-line` `dsi-star-07-solid`   |
+| Stars 01 | ![](src/lib/assets/stars-01/line.svg) | ![](src/lib/assets/stars-01/solid.svg) | `dsi-stars-01-line` `dsi-stars-01-solid` |
+| Stars 02 | ![](src/lib/assets/stars-02/line.svg) | ![](src/lib/assets/stars-02/solid.svg) | `dsi-stars-02-line` `dsi-stars-02-solid` |
+| Stars 03 | ![](src/lib/assets/stars-03/line.svg) | ![](src/lib/assets/stars-03/solid.svg) | `dsi-stars-03-line` `dsi-stars-03-solid` |
+
+#### User Icons
+
+| Icon          | Line                                       | Solid                                       | Class Names                                        |
+| ------------- | ------------------------------------------ | ------------------------------------------- | -------------------------------------------------- |
+| User 01       | ![](src/lib/assets/user-01/line.svg)       | ![](src/lib/assets/user-01/solid.svg)       | `dsi-user-01-line` `dsi-user-01-solid`             |
+| User 02       | ![](src/lib/assets/user-02/line.svg)       | ![](src/lib/assets/user-02/solid.svg)       | `dsi-user-02-line` `dsi-user-02-solid`             |
+| User 03       | ![](src/lib/assets/user-03/line.svg)       | ![](src/lib/assets/user-03/solid.svg)       | `dsi-user-03-line` `dsi-user-03-solid`             |
+| User Circle   | ![](src/lib/assets/user-circle/line.svg)   | ![](src/lib/assets/user-circle/solid.svg)   | `dsi-user-circle-line` `dsi-user-circle-solid`     |
+| User Square   | ![](src/lib/assets/user-square/line.svg)   | ![](src/lib/assets/user-square/solid.svg)   | `dsi-user-square-line` `dsi-user-square-solid`     |
+| User Check 01 | ![](src/lib/assets/user-check-01/line.svg) | ![](src/lib/assets/user-check-01/solid.svg) | `dsi-user-check-01-line` `dsi-user-check-01-solid` |
+| User Check 02 | ![](src/lib/assets/user-check-02/line.svg) | ![](src/lib/assets/user-check-02/solid.svg) | `dsi-user-check-02-line` `dsi-user-check-02-solid` |
+| User Plus 01  | ![](src/lib/assets/user-plus-01/line.svg)  | ![](src/lib/assets/user-plus-01/solid.svg)  | `dsi-user-plus-01-line` `dsi-user-plus-01-solid`   |
+| User Plus 02  | ![](src/lib/assets/user-plus-02/line.svg)  | ![](src/lib/assets/user-plus-02/solid.svg)  | `dsi-user-plus-02-line` `dsi-user-plus-02-solid`   |
+| User Minus 01 | ![](src/lib/assets/user-minus-01/line.svg) | ![](src/lib/assets/user-minus-01/solid.svg) | `dsi-user-minus-01-line` `dsi-user-minus-01-solid` |
+| User Minus 02 | ![](src/lib/assets/user-minus-02/line.svg) | ![](src/lib/assets/user-minus-02/solid.svg) | `dsi-user-minus-02-line` `dsi-user-minus-02-solid` |
+| User X 01     | ![](src/lib/assets/user-x-01/line.svg)     | ![](src/lib/assets/user-x-01/solid.svg)     | `dsi-user-x-01-line` `dsi-user-x-01-solid`         |
+| User X 02     | ![](src/lib/assets/user-x-02/line.svg)     | ![](src/lib/assets/user-x-02/solid.svg)     | `dsi-user-x-02-line` `dsi-user-x-02-solid`         |
+| User Edit     | ![](src/lib/assets/user-edit/line.svg)     | ![](src/lib/assets/user-edit/solid.svg)     | `dsi-user-edit-line` `dsi-user-edit-solid`         |
+| User Up 01    | ![](src/lib/assets/user-up-01/line.svg)    | ![](src/lib/assets/user-up-01/solid.svg)    | `dsi-user-up-01-line` `dsi-user-up-01-solid`       |
+| User Up 02    | ![](src/lib/assets/user-up-02/line.svg)    | ![](src/lib/assets/user-up-02/solid.svg)    | `dsi-user-up-02-line` `dsi-user-up-02-solid`       |
+| User Down 01  | ![](src/lib/assets/user-down-01/line.svg)  | ![](src/lib/assets/user-down-01/solid.svg)  | `dsi-user-down-01-line` `dsi-user-down-01-solid`   |
+| User Down 02  | ![](src/lib/assets/user-down-02/line.svg)  | ![](src/lib/assets/user-down-02/solid.svg)  | `dsi-user-down-02-line` `dsi-user-down-02-solid`   |
+| User Left 01  | ![](src/lib/assets/user-left-01/line.svg)  | ![](src/lib/assets/user-left-01/solid.svg)  | `dsi-user-left-01-line` `dsi-user-left-01-solid`   |
+| User Left 02  | ![](src/lib/assets/user-left-02/line.svg)  | ![](src/lib/assets/user-left-02/solid.svg)  | `dsi-user-left-02-line` `dsi-user-left-02-solid`   |
+| User Right 01 | ![](src/lib/assets/user-right-01/line.svg) | ![](src/lib/assets/user-right-01/solid.svg) | `dsi-user-right-01-line` `dsi-user-right-01-solid` |
+| User Right 02 | ![](src/lib/assets/user-right-02/line.svg) | ![](src/lib/assets/user-right-02/solid.svg) | `dsi-user-right-02-line` `dsi-user-right-02-solid` |
+
+#### Users (Multiple) Icons
+
+| Icon        | Line                                     | Solid                                     | Class Names                                    |
+| ----------- | ---------------------------------------- | ----------------------------------------- | ---------------------------------------------- |
+| Users 01    | ![](src/lib/assets/users-01/line.svg)    | ![](src/lib/assets/users-01/solid.svg)    | `dsi-users-01-line` `dsi-users-01-solid`       |
+| Users 02    | ![](src/lib/assets/users-02/line.svg)    | ![](src/lib/assets/users-02/solid.svg)    | `dsi-users-02-line` `dsi-users-02-solid`       |
+| Users 03    | ![](src/lib/assets/users-03/line.svg)    | ![](src/lib/assets/users-03/solid.svg)    | `dsi-users-03-line` `dsi-users-03-solid`       |
+| Users Check | ![](src/lib/assets/users-check/line.svg) | ![](src/lib/assets/users-check/solid.svg) | `dsi-users-check-line` `dsi-users-check-solid` |
+| Users Plus  | ![](src/lib/assets/users-plus/line.svg)  | ![](src/lib/assets/users-plus/solid.svg)  | `dsi-users-plus-line` `dsi-users-plus-solid`   |
+| Users Minus | ![](src/lib/assets/users-minus/line.svg) | ![](src/lib/assets/users-minus/solid.svg) | `dsi-users-minus-line` `dsi-users-minus-solid` |
+| Users X     | ![](src/lib/assets/users-x/line.svg)     | ![](src/lib/assets/users-x/solid.svg)     | `dsi-users-x-line` `dsi-users-x-solid`         |
+| Users Edit  | ![](src/lib/assets/users-edit/line.svg)  | ![](src/lib/assets/users-edit/solid.svg)  | `dsi-users-edit-line` `dsi-users-edit-solid`   |
+| Users Up    | ![](src/lib/assets/users-up/line.svg)    | ![](src/lib/assets/users-up/solid.svg)    | `dsi-users-up-line` `dsi-users-up-solid`       |
+| Users Down  | ![](src/lib/assets/users-down/line.svg)  | ![](src/lib/assets/users-down/solid.svg)  | `dsi-users-down-line` `dsi-users-down-solid`   |
+| Users Left  | ![](src/lib/assets/users-left/line.svg)  | ![](src/lib/assets/users-left/solid.svg)  | `dsi-users-left-line` `dsi-users-left-solid`   |
+| Users Right | ![](src/lib/assets/users-right/line.svg) | ![](src/lib/assets/users-right/solid.svg) | `dsi-users-right-line` `dsi-users-right-solid` |
+
+**To generate icon classes:**
+
+```bash
+npm run generate:icons
+```
+
+This command will scan the `assets/` folder and automatically generate CSS classes for all SVG files.
+
+</details>
+
+<details open>
+<summary><strong>Icon Colors</strong></summary>
+
+Use any color from the design system:
+
+```html
+<!-- 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>
+```
+
+</details>
+
+<details open>
+<summary><strong>Icon Sizes</strong></summary>
+
+```html
+<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.
+
+</details>
+
+<details open>
+<summary><strong>Icon Animations</strong></summary>
+
+```html
+<!-- 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>
+```
+
+</details>
+
+<details open>
+<summary><strong>Real-World Examples</strong></summary>
+
+```html
+<!-- 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>
+```
+
+</details>
+
+**📚 Complete Icon Documentation:**
+
+- [Full Icon System Guide](./ICON_SYSTEM.md)
+- [Icon Quick Start](../../ICON_QUICK_START.md)
+- [Icon Cheat Sheet](../../ICON_CHEATSHEET.md)
+
+---
+
+### Color System
+
+<details open>
+<summary><strong>Color Palette Structure</strong></summary>
+
+Each color type (brand, primary, secondary, etc.) generates **14 shades** automatically:
+
+| Shade   | Usage          | Lightness | Example Use Case              |
+| ------- | -------------- | --------- | ----------------------------- |
+| **900** | Darkest        | -73.5%    | Text on light backgrounds     |
+| **875** | Very dark      | -62.5%    | Strong text, dark UI elements |
+| **850** | Darker         | -47.0%    | Hover states (dark mode)      |
+| **800** | Dark           | -34.5%    | Secondary text                |
+| **700** | Medium dark    | -18.5%    | Borders, dividers             |
+| **600** | **Base color** | 0%        | **Primary buttons, main UI**  |
+| **500** | Medium light   | +17.5%    | Hover states (light mode)     |
+| **400** | Light          | +33.0%    | Disabled states, placeholders |
+| **300** | Lighter        | +53.0%    | Light borders                 |
+| **200** | Very light     | +72.0%    | Subtle backgrounds            |
+| **100** | Ultra light    | +85.0%    | Card backgrounds              |
+| **50**  | Canvas         | +89.5%    | Page backgrounds              |
+| **25**  | Soft           | +93.5%    | Very subtle backgrounds       |
+| **10**  | Lightest       | +97.0%    | Barely visible backgrounds    |
+
+**Color mixing is done using RGB algorithm**, ensuring accurate and consistent results.
+
+</details>
+
+<details open>
+<summary><strong>Available Color Types</strong></summary>
+
+#### Dynamic Colors (Customizable)
+
+- **brand** - Your company/product brand color
+- **primary** - Main interactive elements (buttons, links, etc.)
+- **secondary** - Secondary actions and content
+- **functional** - Functional UI elements
+- **utility** - Alerts, notifications, warnings
+- **neutral** - Text, borders, backgrounds
+
+#### Theme Colors (Fixed palette for badges/tags)
+
+- **red**, **orange**, **yellow**
+- **lime**, **green**, **ocean**
+- **blue**, **indigo**, **violet**, **pink**
+
+</details>
+
+<details>
+<summary><strong>Default Color Values</strong></summary>
+
+| Type       | Default Value | RGB              |
+| ---------- | ------------- | ---------------- |
+| Brand      | `#2740B4`     | rgb(39, 64, 180) |
+| Primary    | `#006BDF`     | rgb(0, 107, 223) |
+| Secondary  | `#9F5100`     | rgb(159, 81, 0)  |
+| Functional | `#006BDF`     | rgb(0, 107, 223) |
+| Utility    | `#CF0026`     | rgb(207, 0, 38)  |
+| Neutral    | `#505A5F`     | rgb(80, 90, 95)  |
+
+</details>
+
+---
+
+### Semantic Classes Reference
+
+<details open>
+<summary><strong>Background Classes</strong></summary>
+
+```html
+<!-- Semantic backgrounds -->
+<div class="bg-{type}-canvas">
+  <!-- Lightest: shade 10 -->
+  <div class="bg-{type}-soft">
+    <!-- Soft: shade 25 -->
+    <div class="bg-{type}-sub">
+      <!-- Subtle: shade 50 -->
+      <div class="bg-{type}-accent">
+        <!-- Accent: shade 600 -->
+
+        <!-- Direct shade backgrounds -->
+        <div class="color-bg-{type}-{shade}">
+          <!-- Examples -->
+          <div class="bg-primary-canvas">Lightest primary background</div>
+          <div class="bg-neutral-soft">Soft neutral background</div>
+          <div class="color-bg-primary-600">Primary 600 background</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
+
+<details open>
+<summary><strong>Text Classes</strong></summary>
+
+```html
+<!-- Semantic text -->
+<p class="text-{type}-soft"><!-- Soft: shade 300 --></p>
+<p class="text-{type}-sub"><!-- Subtle: shade 600 --></p>
+<p class="text-{type}-strong"><!-- Strong: shade 900 --></p>
+<p class="text-{type}-white">
+  <!-- White text -->
+
+  <!-- Direct shade text -->
+</p>
+
+<p class="color-text-{type}-{shade}">
+  <!-- Examples -->
+</p>
+
+<p class="text-primary-strong">Strong primary text</p>
+<p class="text-neutral-soft">Soft neutral text</p>
+<p class="color-text-primary-700">Primary 700 text</p>
+```
+
+</details>
+
+<details open>
+<summary><strong>Border/Stroke Classes</strong></summary>
+
+```html
+<!-- Semantic strokes -->
+<div class="stroke-{type}-soft">
+  <!-- Soft: shade 100 -->
+  <div class="stroke-{type}-sub">
+    <!-- Subtle: shade 300 -->
+    <div class="stroke-{type}-strong">
+      <!-- Strong: shade 900 -->
+      <div class="stroke-{type}-strong-alpha">
+        <!-- 50% opacity -->
+
+        <!-- Direct shade strokes -->
+        <div class="color-stroke-{type}-{shade}">
+          <!-- Examples -->
+          <div class="stroke-primary-sub">Subtle primary border</div>
+          <div class="stroke-neutral-strong">Strong neutral border</div>
+          <div class="color-stroke-primary-300">Primary 300 border</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</details>
+
+<details open>
+<summary><strong>Icon Color Classes</strong></summary>
+
+```html
+<!-- Semantic icon colors (for icon fonts, not DSI icons) -->
+<i class="icon-{type}-soft">
+  <!-- Soft: shade 300 -->
+  <i class="icon-{type}-sub">
+    <!-- Subtle: shade 600 -->
+    <i class="icon-{type}-strong">
+      <!-- Strong: shade 900 -->
+      <i class="icon-{type}-white">
+        <!-- White icon -->
+
+        <!-- For DSI icons, use dsi-{type}-{shade} classes -->
+        <i class="dsi dsi-activity-line dsi-primary-600"></i></i></i></i
+></i>
+```
+
+</details>
+
+_Replace `{type}` with: `brand`, `primary`, `secondary`, `functional`, `utility`, `neutral`, `red`, `blue`, `green`, etc._
+_Replace `{shade}` with: `10`, `25`, `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `850`, `875`, `900`_
+
+---
+
+### Utility Classes
 
 ```html
 <!-- Heights -->
@@ -238,7 +934,7 @@ Example:
 <div class="rounded-full">999px radius</div>
 ```
 
-### 🔧 API Reference
+### API Reference
 
 #### DynamicDsService
 
@@ -251,32 +947,33 @@ Example:
 - `resetToDefaults(): void` - Reset all colors to default values
 
 **Example:**
+
 ```typescript
 // Initialize on app start
 themeService.initializeTheme().subscribe();
 
 // Update colors later
 themeService.updateSystemDesignColor({
-  primaryColor: '#FF6B00',
-  brandColor: '#2740B4'
+  primaryColor: "#FF6B00",
+  brandColor: "#2740B4",
 });
 
 // Get current colors
 const colors = themeService.getCurrentColors();
 ```
 
-### 🎯 Default Colors
+### Default Colors
 
-| Type | Default Value |
-|------|---------------|
-| Brand | `#2740B4` |
-| Primary | `#006BDF` |
-| Secondary | `#9F5100` |
-| Functional | `#006BDF` |
-| Utility | `#CF0026` |
-| Neutral | `#505A5F` |
+| Type       | Default Value |
+| ---------- | ------------- |
+| Brand      | `#2740B4`     |
+| Primary    | `#006BDF`     |
+| Secondary  | `#9F5100`     |
+| Functional | `#006BDF`     |
+| Utility    | `#CF0026`     |
+| Neutral    | `#505A5F`     |
 
-### 📝 License
+### License
 
 MIT License
 
@@ -284,11 +981,34 @@ MIT License
 
 ## Tiếng Việt
 
-### 📖 Tổng quan
+### Mục lục
+
+- [Tổng quan](#tổng-quan)
+- [Tính năng chính](#tính-năng-chính)
+- [Cài đặt](#cài-đặt)
+- [Bắt đầu nhanh](#bắt-đầu-nhanh)
+- [Sử dụng](#sử-dụng)
+- [Hệ thống Icon (DSI)](#hệ-thống-icon-dsi)
+  - [Danh sách Icons](#danh-sách-icons)
+  - [Cách sử dụng Icon cơ bản](#cách-sử-dụng-icon-cơ-bản)
+  - [Màu sắc Icon](#màu-sắc-icon)
+  - [Kích thước Icon](#kích-thước-icon)
+  - [Animation Icon](#animation-icon)
+  - [Ví dụ thực tế](#ví-dụ-thực-tế)
+- [Bảng màu](#bảng-màu)
+- [Semantic Classes](#semantic-classes)
+- [Màu Badge Theme](#màu-badge-theme)
+- [Tiện ích kích thước](#tiện-ích-kích-thước)
+- [Tham chiếu API](#tham-chiếu-api)
+- [Màu mặc định](#màu-mặc-định)
+
+---
+
+### Tổng quan
 
 **Dynamic-DS (Dynamic Design System)** là thư viện Angular cung cấp hệ thống thiết kế toàn diện với khả năng tùy chỉnh theme động. Nó cho phép ứng dụng tùy chỉnh màu thương hiệu trong khi vẫn duy trì ngôn ngữ thiết kế nhất quán trên tất cả các component.
 
-### ✨ Tính năng chính
+### Tính năng chính
 
 - **Theme màu động**: Tùy chỉnh màu brand, primary, secondary, functional và utility
 - **Tự động tạo bảng màu**: Tạo 14 sắc độ màu (900-10) từ một màu cơ sở
@@ -298,13 +1018,13 @@ MIT License
 - **RGB Mix Algorithm**: Tạo sắc độ màu chính xác bằng thuật toán pha trộn RGB
 - **Cập nhật màu Runtime**: Thay đổi màu theme động mà không cần tải lại trang
 
-### 📦 Cài đặt
+### Cài đặt
 
 ```bash
 npm install dynamic-ds
 ```
 
-### 🚀 Bắt đầu nhanh
+### Bắt đầu nhanh
 
 #### 1. Import Styles
 
@@ -312,9 +1032,7 @@ Thêm styles của design system vào `angular.json`:
 
 ```json
 {
-  "styles": [
-    "node_modules/dynamic-ds/styles/system-design.scss"
-  ]
+  "styles": ["node_modules/dynamic-ds/styles/system-design.scss"]
 }
 ```
 
@@ -323,22 +1041,22 @@ Thêm styles của design system vào `angular.json`:
 Trong `app.config.ts` hoặc module:
 
 ```typescript
-import { ApplicationConfig } from '@angular/core';
-import { SYSTEM_DESIGN_CONFIG } from 'dynamic-ds';
+import { ApplicationConfig } from "@angular/core";
+import { SYSTEM_DESIGN_CONFIG } from "dynamic-ds";
 
 export const appConfig: ApplicationConfig = {
   providers: [
     {
       provide: SYSTEM_DESIGN_CONFIG,
       useValue: {
-        brand: '#2740B4',
-        primary: '#006BDF',
-        secondary: '#9F5100',
-        functional: '#006BDF',
-        utility: '#CF0026'
-      }
-    }
-  ]
+        brand: "#2740B4",
+        primary: "#006BDF",
+        secondary: "#9F5100",
+        functional: "#006BDF",
+        utility: "#CF0026",
+      },
+    },
+  ],
 };
 ```
 
@@ -347,12 +1065,12 @@ export const appConfig: ApplicationConfig = {
 Trong `app.component.ts`:
 
 ```typescript
-import { Component, inject, OnInit } from '@angular/core';
-import { DynamicDsService } from 'dynamic-ds';
+import { Component, inject, OnInit } from "@angular/core";
+import { DynamicDsService } from "dynamic-ds";
 
 @Component({
-  selector: 'app-root',
-  template: `...`
+  selector: "app-root",
+  template: `...`,
 })
 export class AppComponent implements OnInit {
   private themeService = inject(DynamicDsService);
@@ -364,7 +1082,7 @@ export class AppComponent implements OnInit {
 }
 ```
 
-### 🎨 Sử dụng
+### Sử dụng
 
 #### Sử dụng CSS Classes
 
@@ -404,15 +1122,15 @@ export class AppComponent implements OnInit {
 #### Cập nhật màu động
 
 ```typescript
-import { DynamicDsService } from 'dynamic-ds';
+import { DynamicDsService } from "dynamic-ds";
 
 export class SettingsComponent {
   constructor(private themeService: DynamicDsService) {}
 
   updateTheme() {
     this.themeService.updateSystemDesignColor({
-      primaryColor: '#FF5733',
-      secondaryColor: '#33FF57'
+      primaryColor: "#FF5733",
+      secondaryColor: "#33FF57",
     });
   }
 
@@ -428,70 +1146,224 @@ export class SettingsComponent {
 }
 ```
 
-### 🎯 Bảng màu
+### Hệ thống Icon (DSI)
+
+**Dynamic-DS** bao gồm hệ thống icon mạnh mẽ tương tự Bootstrap Icons, với khả năng tùy chỉnh màu sắc đầy đủ sử dụng kỹ thuật CSS mask.
+
+#### Danh sách Icons
+
+Thư viện bao gồm **117 icons** với cả phiên bản line và solid. Xem danh sách đầy đủ trong [phần tiếng Anh](#available-icons).
+
+#### Cách sử dụng Icon cơ bản
+
+```html
+<!-- Icon đơn giản (kích thước mặc định, màu mặc định) -->
+<i class="dsi dsi-activity-line"></i>
+
+<!-- Icon với màu từ 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 với màu tùy chỉnh dùng 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 với modifier kích thước -->
+<i class="dsi dsi-activity-line dsi-xs"></i>
+<!-- Rất nhỏ -->
+<i class="dsi dsi-activity-line dsi-lg"></i>
+<!-- Lớn -->
+<i class="dsi dsi-activity-line dsi-2x"></i>
+<!-- 2x kích thước -->
+
+<!-- Icon với animation -->
+<i class="dsi dsi-activity-line dsi-spin"></i>
+<!-- Xoay -->
+<i class="dsi dsi-activity-heart-solid dsi-pulse"></i>
+<!-- Nhấp nháy -->
+
+<!-- Kết hợp tất cả -->
+<i class="dsi dsi-activity-line dsi-primary-600 dsi-2x dsi-spin"></i>
+```
+
+#### Màu sắc Icon
+
+Sử dụng bất kỳ màu nào từ design system:
+
+```html
+<!-- Màu dynamic -->
+<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>
+
+<!-- Màu theme -->
+<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>
+
+<!-- Sắc độ neutral -->
+<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>
+
+<!-- Hoặc dùng CSS variables cho màu tùy chỉnh -->
+<i class="dsi dsi-activity-line" style="color: var(--primary-600)"></i>
+```
+
+#### Kích thước Icon
+
+```html
+<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 (mặc định) -->
+<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 -->
+```
+
+Icon tự động scale theo font-size, nên chúng tự động thích ứng với kích thước text của container.
+
+#### Animation Icon
+
+```html
+<!-- Animation xoay (360° rotation) -->
+<i class="dsi dsi-activity-line dsi-spin"></i>
+
+<!-- Animation nhấp nháy (opacity fade) -->
+<i class="dsi dsi-activity-heart-solid dsi-pulse"></i>
+
+<!-- Kết hợp với màu và kích thước -->
+<i class="dsi dsi-activity-line dsi-primary-600 dsi-2x dsi-spin"></i>
+```
+
+#### Ví dụ thực tế
+
+```html
+<!-- Button với icon -->
+<button class="btn btn-primary">
+  <i class="dsi dsi-activity-heart-solid"></i>
+  Thích
+</button>
+
+<!-- Trạng thái loading -->
+<div class="loading">
+  <i class="dsi dsi-activity-line dsi-spin dsi-primary-600 dsi-lg"></i>
+  <span>Đang tải...</span>
+</div>
+
+<!-- Alert thành công -->
+<div class="alert alert-success">
+  <i class="dsi dsi-activity-heart-solid dsi-theme-green-600 dsi-xl"></i>
+  <span>Thao tác hoàn tất thành công!</span>
+</div>
+
+<!-- Alert lỗi -->
+<div class="alert alert-error">
+  <i class="dsi dsi-anchor-solid dsi-theme-red-600 dsi-xl"></i>
+  <span>Kết nối thất bại. Vui lòng thử lại.</span>
+</div>
+
+<!-- Navigation item với icon -->
+<a href="/dashboard" class="nav-item">
+  <i class="dsi dsi-activity-line dsi-neutral-600"></i>
+  <span>Bảng điều khiển</span>
+</a>
+
+<!-- Chỉ báo trạng thái -->
+<div class="status">
+  <i class="dsi dsi-activity-heart-solid dsi-theme-green-600 dsi-pulse"></i>
+  <span>Trực tuyến</span>
+</div>
+
+<!-- Icon trong heading -->
+<h2>
+  <i class="dsi dsi-anchor-line dsi-primary-600"></i>
+  Tài liệu
+</h2>
+```
+
+### Bảng màu
 
 Mỗi loại màu tạo ra 14 sắc độ:
 
-| Sắc độ | Cách dùng | Tỷ lệ pha trộn |
-|--------|-----------|----------------|
-| 900 | Tối nhất | -73.5% đen |
-| 875 | Rất tối | -62.5% đen |
-| 850 | Tối hơn | -47.0% đen |
-| 800 | Tối | -34.5% đen |
-| 700 | Tối vừa | -18.5% đen |
-| 600 | **Màu gốc** | 0% |
-| 500 | Sáng vừa | +17.5% trắng |
-| 400 | Sáng | +33.0% trắng |
-| 300 | Sáng hơn | +53.0% trắng |
-| 200 | Rất sáng | +72.0% trắng |
-| 100 | Cực sáng | +85.0% trắng |
-| 50 | Canvas | +89.5% trắng |
-| 25 | Mềm | +93.5% trắng |
-| 10 | Sáng nhất | +97.0% trắng |
-
-### 🏷️ Semantic Classes
+| Sắc độ | Cách dùng   | Tỷ lệ pha trộn |
+| ------ | ----------- | -------------- |
+| 900    | Tối nhất    | -73.5% đen     |
+| 875    | Rất tối     | -62.5% đen     |
+| 850    | Tối hơn     | -47.0% đen     |
+| 800    | Tối         | -34.5% đen     |
+| 700    | Tối vừa     | -18.5% đen     |
+| 600    | **Màu gốc** | 0%             |
+| 500    | Sáng vừa    | +17.5% trắng   |
+| 400    | Sáng        | +33.0% trắng   |
+| 300    | Sáng hơn    | +53.0% trắng   |
+| 200    | Rất sáng    | +72.0% trắng   |
+| 100    | Cực sáng    | +85.0% trắng   |
+| 50     | Canvas      | +89.5% trắng   |
+| 25     | Mềm         | +93.5% trắng   |
+| 10     | Sáng nhất   | +97.0% trắng   |
+
+### Semantic Classes
 
 #### Backgrounds (Nền)
+
 - `.bg-{type}-canvas` - Nền sáng nhất
 - `.bg-{type}-soft` - Nền mềm
 - `.bg-{type}-sub` - Nền tinh tế
 - `.bg-{type}-accent` - Nền nhấn/chính
 
 #### Text (Chữ)
+
 - `.text-{type}-soft` - Màu chữ mềm
 - `.text-{type}-sub` - Màu chữ tinh tế
 - `.text-{type}-strong` - Màu chữ đậm/mạnh
 - `.text-{type}-white` - Chữ trắng
 
 #### Strokes (Viền)
+
 - `.stroke-{type}-soft` - Viền mềm
 - `.stroke-{type}-sub` - Viền tinh tế
 - `.stroke-{type}-strong` - Viền mạnh
 - `.stroke-{type}-strong-alpha` - Viền độ mờ 50%
 
 #### Icons
+
 - `.icon-{type}-soft` - Màu icon mềm
 - `.icon-{type}-sub` - Màu icon tinh tế
 - `.icon-{type}-strong` - Màu icon mạnh
 - `.icon-{type}-white` - Icon trắng
 
-*Trong đó `{type}` có thể là: `brand`, `primary`, `secondary`, `functional`, `utility`, `neutral`, hoặc các theme badge như `red`, `blue`, `green`, v.v.*
+_Trong đó `{type}` có thể là: `brand`, `primary`, `secondary`, `functional`, `utility`, `neutral`, hoặc các theme badge như `red`, `blue`, `green`, v.v._
 
-### 🎨 Màu Badge Theme
+### Màu Badge Theme
 
 Các theme màu định sẵn cho badge/tag:
+
 - `neutral`, `neutral-light`
 - `red`, `orange`, `yellow`
 - `lime`, `green`, `ocean`
 - `blue`, `indigo`, `violet`, `pink`
 
 Ví dụ:
+
 ```html
-<span class="bg-blue-soft text-blue-strong stroke-blue-sub">Badge xanh</span>
-<span class="bg-green-canvas text-green-strong">Thành công</span>
+<span class="bg-blue-soft text-blue-strong stroke-blue-sub">Badge xanh</span> <span class="bg-green-canvas text-green-strong">Thành công</span>
 ```
 
-### 📐 Tiện ích kích thước
+### Tiện ích kích thước
 
 ```html
 <!-- Chiều cao -->
@@ -516,7 +1388,7 @@ Ví dụ:
 <div class="rounded-full">Bo góc 999px</div>
 ```
 
-### 🔧 Tham chiếu API
+### Tham chiếu API
 
 #### DynamicDsService
 
@@ -529,27 +1401,28 @@ Ví dụ:
 - `resetToDefaults(): void` - Đặt lại tất cả màu về giá trị mặc định
 
 **Ví dụ:**
+
 ```typescript
 // Khởi tạo khi app start
 themeService.initializeTheme().subscribe();
 
 // Cập nhật màu sau đó
 themeService.updateSystemDesignColor({
-  primaryColor: '#FF6B00',
-  brandColor: '#2740B4'
+  primaryColor: "#FF6B00",
+  brandColor: "#2740B4",
 });
 
 // Lấy màu hiện tại
 const colors = themeService.getCurrentColors();
 ```
 
-### 🎯 Màu mặc định
+### Màu mặc định
 
-| Loại | Giá trị mặc định |
-|------|------------------|
-| Brand | `#2740B4` |
-| Primary | `#006BDF` |
-| Secondary | `#9F5100` |
-| Functional | `#006BDF` |
-| Utility | `#CF0026` |
-| Neutral | `#505A5F` |
+| Loại       | Giá trị mặc định |
+| ---------- | ---------------- |
+| Brand      | `#2740B4`        |
+| Primary    | `#006BDF`        |
+| Secondary  | `#9F5100`        |
+| Functional | `#006BDF`        |
+| Utility    | `#CF0026`        |
+| Neutral    | `#505A5F`        |