@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214

package/src/components/icons/.vendor-showcase-icons.md

@@ -1,38 +1,30 @@
-<!-- source-hash: 3d0f60e9e20a93009f3bcc4c3a17bf88 -->
-A React component library providing SVG icons for vendor showcase features, including a main showcase icon and four feature-specific icons with customizable styling.
+<!-- source-hash: 79e50606edfa15b1b1e82eebfe400c32 -->
+Deprecated SVG icon components for the vendor showcase section, providing five inline SVG icons used in marketing/feature display contexts.
 
 ## Key Components
 
-- **VendorShowcaseMainIcon** - Main showcase icon (200x200px) with fixed pink styling
-- **TransparentTrustedIcon** - Trust/transparency feature icon with customizable color and size
-- **ModularHellIcon** - Modular architecture feature icon with grid pattern design
-- **RapidInnovationIcon** - Innovation speed feature icon with lightning bolt motif
-- **LowerTCOIcon** - Cost optimization feature icon with circular arrow design
+| Export | Props | Description |
+|--------|-------|-------------|
+| `VendorShowcaseMainIcon` | `className?` | Fixed 200×200 decorative showcase icon (pink) |
+| `TransparentTrustedIcon` | `className?`, `color?`, `size?` | Configurable trust badge icon, defaults: pink `#F357BB`, 42px |
+| `ModularHellIcon` | `className?`, `size`, `color` | Modular grid icon, defaults: cyan `#5EFAF0`, 38px |
+| `RapidInnovationIcon` | `className?`, `size`, `color` | Lightning/speed icon, defaults: pink `#F357BB`, 38px |
+| `LowerTCOIcon` | `className?`, `size`, `color` | Cost reduction icon, defaults: cyan `#5EFAF0`, 42px |
+
+> ⚠️ **All exports are deprecated.** Migrate to `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
-import { 
-  VendorShowcaseMainIcon, 
-  TransparentTrustedIcon,
-  ModularHellIcon 
-} from './vendor-showcase-icons';
-
-// Main showcase icon (fixed styling)
-<VendorShowcaseMainIcon className="hero-icon" />
-
-// Feature icons with custom styling
-<TransparentTrustedIcon 
-  className="feature-icon" 
-  color="#00FF00" 
-  size={48} 
-/>
-
-<ModularHellIcon 
-  className="grid-icon" 
-  size={32} 
-  color="#FF0000" 
-/>
+// ❌ Deprecated — avoid in new code
+import { TransparentTrustedIcon } from './vendor-showcase-icons';
+
+<TransparentTrustedIcon size={48} color="#5EFAF0" className="my-icon" />
+
+// ✅ Preferred — use generated v2 icons
+import { SomeIcon } from '@/components/icons-v2-generated';
 ```
 
-All feature icons accept optional `className`, `size` (number), and `color` (string) props for flexible styling integration.
+## Migration
+
+Replace each deprecated icon with its equivalent from `icons-v2-generated`. The v2 icons maintain the same `className`, `size`, and `color` prop conventions.

package/src/components/icons/.vendors-icon.md

@@ -1,38 +1,34 @@
-<!-- source-hash: 54c685c615e52d1d924dc53af490101a -->
-A React component that renders an SVG icon representing vendors or business partnerships, featuring a customizable vector graphic with dynamic styling properties.
+<!-- source-hash: 92fff1a9c8a6902d408e0837aafcf1c8 -->
+A deprecated SVG icon component representing a "Vendors" concept, rendering a two-path vector graphic with configurable size and color.
 
 ## Key Components
 
-- **VendorsIcon**: Main functional component that renders an SVG icon
-- **VendorsIconProps**: TypeScript interface defining component props:
-  - `color`: Fill color for the SVG paths (default: 'white')
-  - `className`: CSS class name for styling
-  - `width`: Icon width in pixels (default: 24)
-  - `height`: Icon height in pixels (default: 24)
+### `VendorsIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | Fill color for SVG paths |
+| `className` | `string` | `""` | CSS class for styling |
+| `width` | `number` | `24` | Icon width in pixels |
+| `height` | `number` | `24` | Icon height in pixels |
 
-The component renders a complex SVG with two main path elements that create a vendors/partnership themed icon, commonly used in business applications for representing vendor management or partnership features.
+### `VendorsIcon`
+A functional React component rendering a 24×24 SVG vendors icon. Marked as **deprecated** — use the `icons-v2-generated` package instead.
 
 ## Usage Example
 
 ```typescript
 import { VendorsIcon } from './vendors-icon';
 
-// Basic usage with defaults
+// Basic usage
 <VendorsIcon />
 
-// Customized styling
-<VendorsIcon 
-  color="#007bff" 
-  width={32} 
+// Custom size and color
+<VendorsIcon
+  width={32}
   height={32}
-  className="vendor-menu-icon"
+  color="#FFC008"
+  className="my-icon"
 />
-
-// In a button or navigation
-<button className="nav-item">
-  <VendorsIcon color="#333" width={20} height={20} />
-  <span>Vendors</span>
-</button>
 ```
 
-The icon maintains its aspect ratio and provides consistent theming through the configurable color prop, making it suitable for various UI contexts where vendor-related functionality needs visual representation.
+> ⚠️ **Deprecated:** This component is no longer maintained. Migrate to the `icons-v2-generated` icon set for up-to-date icons.

package/src/components/icons/.whatsapp-icon.md

@@ -1,28 +1,44 @@
-<!-- source-hash: 67d4fab780acd171febcb6dd98696a78 -->
-A customizable React SVG component that renders the WhatsApp brand icon with configurable styling properties.
+<!-- source-hash: 4490a37dbc6c04cd50cfecdfb59f9cec -->
+A deprecated SVG icon component that renders the WhatsApp logo as an inline SVG element.
 
 ## Key Components
 
-- **WhatsAppIcon**: React functional component that renders an SVG WhatsApp logo
-- **WhatsAppIconProps**: TypeScript interface defining optional props for color, className, and size customization
+**`WhatsAppIcon`** — React functional component accepting:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | SVG fill color |
+| `size` | `number` | `24` | Width and height in pixels |
+| `className` | `string` | `''` | Additional CSS classes |
+
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { WhatsAppIcon } from './whatsapp-icon';
 
-// Default usage (white icon, 24px size)
+// Default white icon
 <WhatsAppIcon />
 
-// Custom green color and larger size
-<WhatsAppIcon color="#25D366" size={32} />
+// Custom color and size
+<WhatsAppIcon color="#25D366" size={32} className="my-icon" />
 
-// With CSS classes and custom styling
-<WhatsAppIcon 
-  className="hover:scale-110 transition-transform" 
-  color="#128C7E" 
-  size={20} 
-/>
+// Inside a button
+<button>
+  <WhatsAppIcon color="currentColor" size={20} />
+  Chat on WhatsApp
+</button>
 ```
 
-The component uses the official WhatsApp logo path and provides sensible defaults: white color, 24px size, and no additional CSS classes. The SVG maintains proper aspect ratio and scales cleanly at any size.
+## Migration
+
+Replace usages with the equivalent from the `icons-v2-generated` package:
+
+```typescript
+// ❌ Deprecated
+import { WhatsAppIcon } from './whatsapp-icon';
+
+// ✅ Preferred
+import { WhatsAppIcon } from '@/components/icons-v2-generated';
+```

package/src/components/icons/.x-icon.md

@@ -1,40 +1,35 @@
-<!-- source-hash: a2809b7d1f4893e417f3edda49d5ed6a -->
-A React component that renders an X (close) icon as an SVG, typically used for close buttons in modals, notifications, or other dismissible UI elements.
+<!-- source-hash: 36d5357d0925c48782d5d7f3ed3122f0 -->
+A deprecated SVG icon component rendering a circular "X" (close/dismiss) symbol.
 
 ## Key Components
 
-- **XIcon**: Main component that renders a circular X icon with customizable properties
-- **XIconProps**: TypeScript interface defining the component's props including color, dimensions, and CSS class
+### `XIcon`
+A React functional component that renders an inline SVG with a circle outline and an X mark inside it.
 
-## Props
+> ⚠️ **Deprecated:** Use icons from `icons-v2-generated` instead.
+
+**Props (`XIconProps`):**
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `color` | `string` | `'white'` | Fill color for the icon (currently not applied to paths) |
-| `width` | `number` | `16` | Width of the SVG in pixels |
-| `height` | `number` | `16` | Height of the SVG in pixels |
-| `className` | `string` | `''` | Additional CSS classes to apply |
+| `color` | `string` | `'white'` | Accepted but not applied to SVG paths (paths use hardcoded `#FAFAFA`) |
+| `width` | `number` | `16` | SVG width in pixels |
+| `height` | `number` | `16` | SVG height in pixels |
+| `className` | `string` | `''` | Additional CSS classes for the SVG element |
 
 ## Usage Example
 
 ```typescript
 import { XIcon } from './x-icon';
 
-// Basic usage with defaults
+// Basic usage
 <XIcon />
 
-// Customized icon
-<XIcon 
-  width={24} 
-  height={24} 
-  className="hover:opacity-75 cursor-pointer"
-  color="red"
-/>
-
-// In a close button
-<button onClick={handleClose} className="absolute top-2 right-2">
-  <XIcon width={20} height={20} />
-</button>
+// Custom size with class
+<XIcon width={24} height={24} className="close-button-icon" />
 ```
 
-**Note**: The `color` prop is defined but not currently used in the SVG paths, which are hardcoded to `#FAFAFA` (light gray). The paths would need to use `fill={color}` instead of the hardcoded hex values to make the color prop functional.
+## Notes
+
+- The `color` prop is accepted but does **not** affect rendering — both SVG paths are hardcoded to `#FAFAFA`. Pass `className` and use CSS `fill` overrides if color customization is needed.
+- For new code, prefer the replacement icons from the `icons-v2-generated` package.

package/src/components/icons/.x-logo.md

@@ -1,49 +1,24 @@
-<!-- source-hash: 679a05f875fd2df1758bb25a2b21a375 -->
-This React component renders the X (formerly Twitter) logo as an SVG icon with customizable properties and styling.
+<!-- source-hash: 8fc7a78c442730b70f2df9f64dbec86a -->
+SVG icon component rendering the X (formerly Twitter) logo, marked as deprecated in favor of the `icons-v2-generated` icon library.
 
 ## Key Components
 
-- **XLogo**: Main component that renders the X logo SVG
-- **XLogoProps**: Interface extending SVG props with optional className
-- **SVG paths**: Two path elements defining the X logo geometry
+- **`XLogoProps`** — Extends `React.SVGProps<SVGSVGElement>` with an optional `className` prop, allowing full SVG attribute passthrough
+- **`XLogo`** — Deprecated functional component rendering a 24×24 X logo SVG with two filled paths
 
 ## Usage Example
 
 ```typescript
 import { XLogo } from './x-logo';
 
-// Basic usage with default white color
-function SocialLinks() {
-  return (
-    <div className="social-icons">
-      <XLogo />
-    </div>
-  );
-}
-
-// Custom styling and color
-function Header() {
-  return (
-    <nav>
-      <XLogo 
-        className="w-8 h-8 hover:opacity-80" 
-        color="#1DA1F2" 
-        width={32}
-        height={32}
-      />
-    </nav>
-  );
-}
-
-// With click handler
-function ShareButton() {
-  return (
-    <button onClick={() => window.open('https://x.com/share')}>
-      <XLogo className="mr-2" />
-      Share on X
-    </button>
-  );
-}
+// Basic usage
+<XLogo />
+
+// With custom class and color
+<XLogo className="social-icon" color="black" />
+
+// With SVG passthrough props
+<XLogo width={32} height={32} aria-label="X (Twitter)" />
 ```
 
-The component accepts all standard SVG properties through props spreading, making it highly flexible for different use cases while maintaining a consistent 24x24 default size and white fill color.
+> **Deprecated:** Use icons from `icons-v2-generated` instead of this component.

package/src/components/icons/.youtube-icon.md

@@ -1,32 +1,21 @@
-<!-- source-hash: 4f1075f5d40a26ce0f805c6e422e0250 -->
-A React component that renders an SVG YouTube icon with customizable styling and color props.
+<!-- source-hash: 1957d513c1d42259115fc8374dc5ce5d -->
+Renders a YouTube SVG icon as a React component with configurable stroke color and CSS class support.
 
 ## Key Components
 
-- **`YouTubeIcon`** - Main component export that renders a scalable YouTube play button icon
-- **`YouTubeIconProps`** - TypeScript interface defining optional `color` and `className` props
+- **`YouTubeIconProps`** — Interface accepting optional `color` (stroke color, defaults to `'white'`) and `className` (CSS class string) props.
+- **`YouTubeIcon`** — ⚠️ **Deprecated.** A 24×24 SVG icon component representing the YouTube play button shape. Migrate to `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { YouTubeIcon } from './youtube-icon';
 
-// Basic usage with default white color
+// Default white icon
 <YouTubeIcon />
 
-// Custom color and styling
-<YouTubeIcon 
-  color="#ff0000" 
-  className="w-6 h-6 hover:scale-110" 
-/>
-
-// Integration in a video thumbnail
-<div className="relative">
-  <img src="thumbnail.jpg" alt="Video" />
-  <div className="absolute inset-0 flex items-center justify-center">
-    <YouTubeIcon color="red" className="w-12 h-12" />
-  </div>
-</div>
+// Custom color and class
+<YouTubeIcon color="#FF0000" className="w-6 h-6" />
 ```
 
-The icon uses SVG paths to create the classic YouTube rounded rectangle with a centered play triangle. The `stroke` attribute controls the outline color while maintaining the transparent fill for versatile styling options.
+> **Deprecated:** `YouTubeIcon` is marked for removal. Use the equivalent export from `icons-v2-generated` for all new development.

package/src/components/icons/device-type-icons/.get-device-type-icon.md

@@ -1,48 +1,40 @@
-<!-- source-hash: 48be37537896b49d535a85f863ad8edf -->
-A utility function that returns the appropriate device icon component based on device type, providing consistent iconography for different device categories across the application.
+<!-- source-hash: 03501c414b214449740c6235ebca35a7 -->
+Returns a React icon element corresponding to a given device type, mapping device categories to visual icons from the `icons-v2-generated` library.
+
+> ⚠️ **Deprecated** — This utility and its associated types are deprecated. Use icons directly from `icons-v2-generated` instead.
 
 ## Key Components
 
-- **`DeviceType`** - Type union defining supported device categories: desktop, laptop, mobile, tablet, server
-- **`DeviceTypeIconProps`** - Interface for icon styling properties (className, color, size)
-- **`getDeviceTypeIcon()`** - Main function that maps device types to their corresponding icon components
+| Export | Type | Description |
+|--------|------|-------------|
+| `DeviceType` | Type alias | Union of `'desktop' \| 'laptop' \| 'mobile' \| 'tablet' \| 'server'` |
+| `DeviceTypeIconProps` | Interface | Optional `className`, `color`, and `size` props passed to the icon |
+| `getDeviceTypeIcon` | Function | Returns a `React.ReactElement` icon based on device type |
 
-## Icon Mapping
+**Icon Mapping:**
 
-The function maps device types to specific icon components:
-- `desktop` → `MonitorIcon`
-- `laptop` → `LaptopIcon` 
-- `server` → `HardDriveIcon`
-- `mobile`, `tablet`, and fallback → `MonitorIcon`
+| Device Type | Icon Rendered |
+|-------------|---------------|
+| `desktop` | `MonitorIcon` |
+| `laptop` | `LaptopIcon` |
+| `server` | `HardDriveIcon` |
+| `mobile`, `tablet`, `undefined` | `MonitorIcon` (fallback) |
 
 ## Usage Example
 
 ```typescript
 import { getDeviceTypeIcon } from './get-device-type-icon'
 
-// Basic usage
-const desktopIcon = getDeviceTypeIcon('desktop')
-
-// With custom styling
-const styledLaptopIcon = getDeviceTypeIcon('laptop', {
+// Render a laptop icon with custom styles
+const icon = getDeviceTypeIcon('laptop', {
   className: 'device-icon',
-  color: '#3b82f6',
-  size: 24
+  color: '#FFC008',
+  size: 24,
 })
 
-// In a component
-function DeviceList({ devices }) {
-  return (
-    <div>
-      {devices.map(device => (
-        <div key={device.id}>
-          {getDeviceTypeIcon(device.type, { size: 20 })}
-          <span>{device.name}</span>
-        </div>
-      ))}
-    </div>
-  )
-}
-```
-
-The function handles undefined device types gracefully by falling back to the monitor icon, ensuring consistent UI rendering even with missing or invalid device type data.
+// Render a server icon
+const serverIcon = getDeviceTypeIcon('server', { size: 20 })
+
+// Falls back to MonitorIcon for unknown/mobile/tablet types
+const fallbackIcon = getDeviceTypeIcon('mobile')
+```

package/src/components/icons-v2-generated/.index.md

@@ -0,0 +1,52 @@
+<!-- source-hash: 256f84597b248eb290145454cccf170b -->
+Barrel export file that re-exports all icon components from their respective category modules, providing a single entry point for the entire icon library.
+
+## Key Components
+
+All exports are organized into the following categories:
+
+| Category | Module |
+|---|---|
+| Alphabet | `./alphabet` |
+| Arrows | `./arrows` |
+| Audio & Visual | `./audio-and-visual` |
+| Brand Logos | `./brand-logos` |
+| Buildings | `./buildings` |
+| Charts | `./charts` |
+| Clothes | `./clothes` |
+| Coding | `./coding` |
+| Communication | `./communication` |
+| Date & Time | `./date-and-time` |
+| Design | `./design` |
+| Devices | `./devices` |
+| Documents | `./documents` |
+| Finance | `./finance` |
+| Food & Drinks | `./food-and-drinks` |
+| Health | `./health` |
+| Household | `./household` |
+| Interface | `./interface` |
+| Loaders | `./loaders` |
+| Map & Travel | `./map-and-travel` |
+| Media Playback | `./media-playback` |
+| Numbers | `./number` |
+| School | `./school` |
+| Security | `./security` |
+| Shopping | `./shopping` |
+| Signs & Symbols | `./signs-and-symbols` |
+| Sort & Filter | `./sort-and-filter` |
+| Sport | `./sport` |
+| Text Editor | `./text-editor` |
+| Users | `./users` |
+| Vehicles & Delivery | `./vehicles-and-delivery` |
+| Weather & Nature | `./weather-and-nature` |
+
+## Usage Example
+
+```typescript
+// Import any icon directly from the root index
+import { ArrowRight, ShieldCheck, UserCircle, BellIcon } from '@/components/icons';
+
+// Use in a React/Vue component
+<ArrowRight className="w-4 h-4" />
+<ShieldCheck className="text-green-500" />
+```

package/src/components/icons-v2-generated/alphabet/.index.md

@@ -0,0 +1,33 @@
+<!-- source-hash: 6c44e3c9ac79a9939d005384a5ce6501 -->
+Barrel export file that re-exports all 78 alphabet icon components (A–Z), each available in three variants: plain, circle, and square.
+
+## Key Components
+
+Each letter (A–Z) is exported in three icon variants:
+
+| Variant | Example Export | Description |
+|---------|---------------|-------------|
+| Plain | `AlphabetAIcon` | Standalone letter icon |
+| Circle | `AlphabetACircleIcon` | Letter enclosed in a circle |
+| Square | `AlphabetASquareIcon` | Letter enclosed in a square |
+
+## Usage Example
+
+```typescript
+import {
+  AlphabetAIcon,
+  AlphabetBCircleIcon,
+  AlphabetCSquareIcon
+} from './index';
+
+// Use in a React component
+const MyComponent = () => (
+  <div>
+    <AlphabetAIcon />
+    <AlphabetBCircleIcon />
+    <AlphabetCSquareIcon />
+  </div>
+);
+```
+
+> All 78 icons (26 letters × 3 variants) are available from this single entry point, simplifying imports across the codebase.

package/src/components/icons-v2-generated/arrows/.index.md

@@ -0,0 +1,39 @@
+<!-- source-hash: ea97300b4070f914d0b730164512fefa -->
+Barrel export file that re-exports all arrow, chevron, and directional icon components from their individual modules, providing a single import entry point for the arrows/directions icon category.
+
+## Key Components
+
+| Export Group | Icons |
+|---|---|
+| **Arrow 01–04** | `Down`, `Left`, `Right`, `Up` variants (4 styles × 4 directions) |
+| **Arrow Circle** | `ArrowCircleDownIcon`, `ArrowCircleLeftIcon`, `ArrowCircleRightIcon`, `ArrowCircleUpIcon` |
+| **Arrow Corner** | `ArrowCornerBlIcon`, `ArrowCornerBrIcon`, `ArrowCornerTlIcon`, `ArrowCornerTrIcon` |
+| **Arrow Square** | `ArrowSquareDownIcon`, `ArrowSquareLeftIcon`, `ArrowSquareRightIcon`, `ArrowSquareUpIcon` |
+| **Arrow Turn** | `ArrowTurnDownIcon`, `ArrowTurnLeftIcon`, `ArrowTurnRightIcon`, `ArrowTurnUpIcon` |
+| **Chevron 01–02** | `Down`, `Left`, `Right`, `Up` variants (2 styles × 4 directions) |
+| **Chevron Circle** | `ChevronCircleDownIcon`, `ChevronCircleLeftIcon`, `ChevronCircleRightIcon`, `ChevronCircleUpIcon` |
+| **Chevrons 03–05** | `Down`, `Left`, `Right`, `Up` / `Hr`, `Vr` variants |
+| **Chevron Square** | `ChevronSquareDownIcon`, `ChevronSquareLeftIcon`, `ChevronSquareRightIcon`, `ChevronSquareUpIcon` |
+| **Misc** | `ArrowRightUpIcon`, `ArrowsSpinIcon`, `ExpandArrowHrIcon`, `ExpandArrowVrIcon`, `SwitchHrIcon`, `SwitchVrIcon`, `TransferAltIcon`, `TransferAltSquareIcon`, `TransferHrIcon`, `TransferHrSquareIcon`, `TransferVrIcon`, `TransferVrSquareIcon` |
+
+## Usage Example
+
+```typescript
+// Import individual icons as needed
+import {
+  Arrow01DownIcon,
+  Chevron02RightIcon,
+  TransferHrIcon,
+  ArrowsSpinIcon
+} from './icons/arrows';
+
+// Use in a React component
+const NavigationControls = () => (
+  <div>
+    <Arrow01DownIcon />
+    <Chevron02RightIcon />
+    <TransferHrIcon />
+    <ArrowsSpinIcon />
+  </div>
+);
+```

package/src/components/icons-v2-generated/audio-and-visual/.index.md

@@ -0,0 +1,40 @@
+<!-- source-hash: 5e8522c082047e5d85006f018bb25dbe -->
+Barrel export file for the **media & audio/visual icon set**, re-exporting all media-related SVG icon components from their individual modules as a single unified entry point.
+
+## Key Components
+
+This file exports **71 media and multimedia icons** grouped into the following categories:
+
+| Category | Icons |
+|----------|-------|
+| **Camera** | `CameraIcon`, `CameraOffIcon`, `CameraRetro01Icon`, `CameraRetro02Icon`, `ApertureIcon`, `FlashIcon`, `FlashAutoIcon`, `FlashOffIcon` |
+| **Video** | `VideoRecorderIcon`, `VideoRecorderAltIcon`, `VideoRecorderOffIcon`, `VideoRecorderPlayIcon`, `ClapperboardIcon`, `ClapperboardPlayIcon`, `MovieIcon`, `FilmHrIcon`, `FilmVrIcon` |
+| **Audio** | `HeadphoneIcon`, `HeadsetIcon`, `MicrophoneStandIcon`, `RadioIcon`, `PodcastIcon`, `GramophoneIcon`, `CassetteTapeIcon`, `DiscVinylIcon` |
+| **Music** | `MusicNote01Icon`, `MusicNote02Icon`, `PlaylistIcon`, `PlaylistMusicIcon`, `CollectionMusicIcon`, `CollectionAudioIcon` |
+| **Image** | `ImageIcon`, `ImageAIIcon`, `ImageOffIcon`, `ImagePlusIcon`, `ImageCheckIcon`, `ImageArrowDownIcon`, `ImageArrowUpIcon`, `ImageXmarkIcon`, `PhotoFilterIcon` |
+| **Volume** | `VolumeUpIcon`, `VolumeDownIcon`, `VolumeOffIcon`, `VolumePlusIcon`, `VolumeMinusIcon`, `VolumeXmarkIcon` |
+| **Standards** | `Standard3dIcon`, `Standard4kIcon`, `StandardHdIcon`, `StandardSdIcon`, `StandardVrIcon`, `StandardArIcon`, `StandardAdIcon`, `StandardCcIcon` |
+| **Collections** | `CollectionAlbumIcon`, `CollectionImageIcon`, `CollectionVideoIcon` |
+| **Misc** | `ColorPaletteIcon`, `ColorsIcon`, `Contrast01Icon`, `Contrast02Icon`, `LightningIcon`, `LightningFastIcon`, `CarouselHrIcon`, `CarouselVrIcon` |
+
+## Usage Example
+
+```typescript
+// Import individual icons directly from the barrel
+import {
+  CameraIcon,
+  VideoRecorderIcon,
+  MusicNote01Icon,
+  VolumeUpIcon,
+  Standard4kIcon
+} from './icons/media';
+
+// Use in a React/Vue component
+const MediaControls = () => (
+  <div>
+    <CameraIcon size={24} />
+    <VideoRecorderIcon size={24} />
+    <VolumeUpIcon size={24} />
+  </div>
+);
+```

package/src/components/icons-v2-generated/brand-logos/.elestio-logo-icon.md

@@ -0,0 +1,40 @@
+<!-- source-hash: 1788aa9b91806ff9135f0ae3039660b6 -->
+A React SVG icon component that renders the Elestio logo as a scalable vector graphic with multi-color gradient fills.
+
+## Key Components
+
+### `ElestioLogoIconProps`
+Extends `SVGProps<SVGSVGElement>` (omitting `width` and `height`) with:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `""` | CSS class name |
+| `size` | `number` | `24` | Width and height in pixels |
+| `color` | `string` | `"currentColor"` | Base color (used for inheritance) |
+
+### `ElestioLogoIcon`
+Renders the Elestio brand logo using a masked SVG with six gradient-filled path segments:
+- **Red segment** — solid `#A91A1F` fill
+- **Orange gradient** — `#EC5A22` → `#F5A11A`
+- **Dark red gradient** — `#BF161C` → `#E81C24`
+- **Purple gradient** — `#8C278A` → `#A567A5`
+- **Yellow gradient** — `#F28E1E` → `#FFC605`
+- **Blue gradient** — `#00A9EA` → `#6DCAF1`
+
+## Usage Example
+
+```typescript
+import { ElestioLogoIcon } from "./elestio-logo-icon";
+
+// Default usage
+<ElestioLogoIcon />
+
+// Custom size
+<ElestioLogoIcon size={48} />
+
+// With CSS class
+<ElestioLogoIcon size={32} className="my-icon" />
+
+// With additional SVG props
+<ElestioLogoIcon size={64} aria-label="Elestio" role="img" />
+```