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

package/src/components/icons/.grid-view-icon.md

@@ -1,33 +1,44 @@
-<!-- source-hash: c0921228c393ef69f77a97cd7c5828c5 -->
-A React component that renders a customizable grid view icon using SVG, commonly used for toggling between grid and list layouts in user interfaces.
+<!-- source-hash: 9c4ed445c4fdc96885b626c55506e5b5 -->
+A deprecated React SVG icon component that renders a 2×2 grid view layout icon.
 
 ## Key Components
 
-- **GridViewIcon**: Main functional component that renders a 2x2 grid icon
-- **Props interface**: Accepts `className`, `size`, and `color` for customization
-- **SVG paths**: Two path elements that create the four-square grid pattern
+### `GridViewIcon`
+**⚠️ Deprecated** — Use icons from `icons-v2-generated` instead.
+
+A functional React component rendering a grid/dashboard view SVG icon with four rounded squares arranged in a 2×2 pattern.
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `"w-5 h-5"` | CSS class for sizing/styling |
+| `size` | `number` | `22` | Width and height in pixels |
+| `color` | `string` | `"white"` | SVG fill color |
 
 ## Usage Example
 
 ```typescript
 import { GridViewIcon } from './grid-view-icon'
 
-// Default usage (white icon, 22px, w-5 h-5 classes)
+// Default usage
 <GridViewIcon />
 
 // Custom size and color
-<GridViewIcon size={24} color="#333" />
-
-// Custom styling with Tailwind classes
-<GridViewIcon 
-  className="w-6 h-6 hover:opacity-80" 
-  color="currentColor"
-/>
-
-// In a button for layout switching
-<button className="p-2 rounded">
-  <GridViewIcon size={20} color="#6b7280" />
-</button>
+<GridViewIcon size={32} color="#FFC008" className="w-8 h-8" />
+
+// Dark theme variant
+<GridViewIcon color="#1a1a1a" size={20} />
 ```
 
-The component uses a 21x22 viewBox and creates a symmetrical 2x2 grid pattern. The dual path structure ensures proper rendering across different browsers and provides visual consistency for grid/tile view toggles in applications.
+## Migration Note
+
+This component is deprecated. Replace usages with the equivalent icon from the `icons-v2-generated` package:
+
+```typescript
+// ❌ Deprecated
+import { GridViewIcon } from './grid-view-icon'
+
+// ✅ Preferred
+import { GridViewIcon } from '@/icons-v2-generated'
+```

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

@@ -1,33 +1,35 @@
-<!-- source-hash: 3eaaa5f84ae06fb69eb195888c929dc4 -->
-A React functional component that renders a customizable hamburger menu icon as an SVG element with three horizontal lines.
+<!-- source-hash: e0426ecbbaf6142f83e5306bc606f66c -->
+A deprecated React SVG component that renders a 16×16 hamburger (three horizontal lines) menu icon.
 
 ## Key Components
 
-- **HamburgerIcon**: Main component that renders the hamburger menu icon
-- **HamburgerIconProps**: TypeScript interface defining optional props for customization
-  - `width`: Icon width in pixels (default: 16)
-  - `height`: Icon height in pixels (default: 16)  
-  - `className`: CSS class name for styling
+### `HamburgerIcon`
+> ⚠️ **Deprecated** — Use icons from `icons-v2-generated` instead.
+
+A functional React component rendering an inline SVG hamburger icon with three horizontal bars.
+
+**Props (`HamburgerIconProps`):**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number` | `16` | SVG width in pixels |
+| `height` | `number` | `16` | SVG height in pixels |
+| `className` | `string` | `''` | Additional CSS classes |
 
 ## Usage Example
 
 ```typescript
 import { HamburgerIcon } from './hamburger-icon';
 
-// Basic usage with defaults
+// Basic usage
 <HamburgerIcon />
 
-// Custom size and styling
-<HamburgerIcon 
-  width={24} 
-  height={24} 
-  className="text-blue-500 hover:text-blue-700" 
-/>
-
-// In a mobile menu button
-<button className="md:hidden" onClick={toggleMenu}>
-  <HamburgerIcon width={20} height={20} className="transition-colors" />
-</button>
+// Custom size with Tailwind class
+<HamburgerIcon width={24} height={24} className="cursor-pointer hover:opacity-75" />
 ```
 
-The icon uses a fixed light color (`#FAFAFA`) and maintains a 16x16 viewBox regardless of the actual dimensions, ensuring consistent proportions when scaled.
+## Notes
+
+- Renders a static `16×16` viewBox SVG with fill color hardcoded to `#FAFAFA` (near-white) — not themeable via props
+- Size is adjustable via `width`/`height` props, but color requires a CSS override or direct modification
+- Superseded by the `icons-v2-generated` icon library; migrate usages to the newer package to stay current with the Flamingo icon system

package/src/components/icons/.hand-dollar-icon.md

@@ -1,44 +1,34 @@
-<!-- source-hash: 57ec3d77681f70b0c672c19a3ccd8a45 -->
-A React functional component that renders a customizable hand holding dollar sign SVG icon with configurable styling properties.
+<!-- source-hash: 1f8ede459925f659610b0a7bac6e957f -->
+A deprecated SVG icon component rendering a hand holding a dollar sign, intended for financial or payment-related UI contexts.
 
 ## Key Components
 
-- **HandDollarIcon**: Main React component that renders an SVG icon
-- **HandDollarIconProps**: TypeScript interface defining component props
-  - `className`: Optional CSS class for styling
-  - `width`: Icon width in pixels (default: 24)
-  - `height`: Icon height in pixels (default: 24)
-  - `color`: Stroke color (default: CSS variable `--ods-flamingo-cyan-base`)
+### `HandDollarIconProps`
+| Prop | Type | Default |
+|------|------|---------|
+| `className` | `string` | `""` |
+| `width` | `number` | `24` |
+| `height` | `number` | `24` |
+| `color` | `string` | `var(--ods-flamingo-cyan-base)` |
 
-The component features a hand holding/offering money symbol with customizable dimensions and styling, commonly used for financial or payment-related UI elements.
+### `HandDollarIcon`
+A functional React component that renders a 24×24 SVG hand-dollar icon. Stroke color is driven by the `color` prop, defaulting to the Flamingo design system's cyan token.
+
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { HandDollarIcon } from './hand-dollar-icon';
 
-function PaymentSection() {
-  return (
-    <div>
-      {/* Default styling */}
-      <HandDollarIcon />
-      
-      {/* Custom size and color */}
-      <HandDollarIcon 
-        width={32} 
-        height={32} 
-        color="#008080" 
-      />
-      
-      {/* With custom CSS class */}
-      <HandDollarIcon 
-        className="payment-icon" 
-        width={20}
-        height={20}
-      />
-    </div>
-  );
-}
-```
-
-The icon uses stroke-based rendering and maintains a 24x24 viewBox for consistent scaling across different sizes.
+// Default usage
+<HandDollarIcon />
+
+// Custom size and color
+<HandDollarIcon
+  width={32}
+  height={32}
+  color="#FFC008"
+  className="billing-icon"
+/>
+```

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

@@ -1,34 +1,40 @@
-<!-- source-hash: 798156e3146b585daeaec963001c647e -->
-A React SVG icon component that renders a hotel/building icon with customizable styling properties.
+<!-- source-hash: be62c9883478ad436c70847e0cf19108 -->
+A deprecated React SVG icon component that renders a hotel/building icon.
 
 ## Key Components
 
-- **HotelIconProps** - Interface defining optional props for className, size, and color customization
-- **HotelIcon** - Main functional component that renders an SVG hotel icon with default styling
+### `HotelIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | CSS class for the SVG element |
+| `size` | `number` | `24` | Width and height in pixels |
+| `color` | `string` | `'white'` | Fill color for the icon path |
+
+### `HotelIcon`
+> **⚠️ Deprecated** — Use icons from `icons-v2-generated` instead.
+
+Renders an SVG hotel/building icon with configurable size, color, and className.
 
 ## Usage Example
 
 ```typescript
 import { HotelIcon } from './hotel-icon'
 
-// Basic usage with defaults (24px, white color)
+// Basic usage
 <HotelIcon />
 
-// Customized size and color
-<HotelIcon size={32} color="#333" />
-
-// With CSS classes for additional styling
-<HotelIcon 
-  className="hover:opacity-80 transition-opacity" 
-  size={48} 
-  color="currentColor" 
-/>
-
-// In a button or interactive element
-<button className="flex items-center gap-2">
-  <HotelIcon size={20} color="white" />
-  Hotels
-</button>
+// Custom size and color
+<HotelIcon size={32} color="#FFC008" className="my-icon" />
 ```
 
-The component uses a 65x64 viewBox SVG with a detailed hotel building path. All props have sensible defaults: 24px size, white color, and empty className. The icon scales proportionally and accepts any valid CSS color value.
+## Migration
+
+This component is deprecated. Replace with the equivalent from the generated icon set:
+
+```typescript
+// ❌ Deprecated
+import { HotelIcon } from './hotel-icon'
+
+// ✅ Preferred
+import { HotelIcon } from '@/components/icons-v2-generated'
+```

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

@@ -1,13 +1,24 @@
-<!-- source-hash: bbd5d3a7a3d94c3a8f973dc7ba08af49 -->
-A utility function that provides centralized icon rendering for a React application, mapping string identifiers to their corresponding icon components from both Lucide React and custom logo components.
+<!-- source-hash: b50d93437dc2c0f9307b3a517770ef68 -->
+Utility function that maps icon name strings to React JSX elements, supporting both Lucide icons and custom platform logos.
 
 ## Key Components
 
-- **`renderSvgIcon(name, props)`** - Main function that takes an icon name string and optional SVG props, returning the appropriate React icon component
-- **Icon mapping** - Internal record mapping icon names to their respective component renderers
-- **Fallback handling** - Returns Megaphone icon when an unknown name is provided
-- **Lucide icons** - Standard UI icons (megaphone, bell, info, star, rocket, package, globe)
-- **Custom logos** - Platform-specific logo components (OpenFrame, OpenMSP, Flamingo, Miami Cyber Gang)
+### `renderSvgIcon(name, props)` *(deprecated)*
+- **Parameters:** `name: string` — icon identifier; `props` — optional SVG props spread onto the element
+- **Returns:** `React.ReactElement`
+- **Fallback:** Renders `<Megaphone />` for unrecognised names
+- **Deprecated:** Use icons from `icons-v2-generated` instead
+
+### Supported Icon Names
+
+| Name | Source |
+|------|--------|
+| `megaphone`, `bell`, `info`, `star`, `rocket`, `package`, `globe` | Lucide React |
+| `openframe-logo` | `OpenFrameLogo` |
+| `openmsp-logo` | `OpenmspLogo` |
+| `flamingo`, `flamingo-logo` | `FlamingoLogo` |
+| `tmcg-logo` | `MiamiCyberGangLogoFaceOnly` |
+| `universal` | `Globe` (Lucide alias) |
 
 ## Usage Example
 
@@ -15,25 +26,13 @@ A utility function that provides centralized icon rendering for a React applicat
 import { renderSvgIcon } from './icon-utils';
 
 // Render a Lucide icon
-const notificationIcon = renderSvgIcon('bell', { 
-  size: 24, 
-  className: 'text-blue-500' 
-});
-
-// Render a custom logo
-const platformLogo = renderSvgIcon('openframe-logo', { 
-  width: 32, 
-  height: 32 
-});
-
-// Fallback to megaphone for unknown icons
-const fallbackIcon = renderSvgIcon('unknown-icon', { 
-  className: 'icon-fallback' 
-});
-
-// Use in JSX
-<div className="icon-container">
-  {renderSvgIcon('star', { size: 16 })}
-  {renderSvgIcon('flamingo-logo')}
-</div>
-```
+const bellIcon = renderSvgIcon('bell', { width: 20, height: 20 });
+
+// Render a platform logo
+const flamingoIcon = renderSvgIcon('flamingo-logo', { className: 'text-yellow-400' });
+
+// Unknown name falls back to Megaphone
+const fallback = renderSvgIcon('unknown-icon');
+```
+
+> **⚠️ Deprecated:** This function is superseded by `icons-v2-generated`. Avoid using `renderSvgIcon` in new code and migrate existing usages to the updated icon registry.

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

@@ -1,35 +1,28 @@
-<!-- source-hash: 25161e5f564563ef15e7792dd4294cd3 -->
-A reusable React SVG icon component that renders an image/photo icon with customizable styling and color options.
+<!-- source-hash: c4f9215f3e4669f5b660621a2b336796 -->
+Renders a simple image SVG icon with a rounded rectangle frame, a circle representing a sun/highlight, and a diagonal path suggesting a landscape — accepting optional className and color props.
 
 ## Key Components
 
-- **`ImageIconProps`** - TypeScript interface defining optional className and color properties
-- **`ImageIcon`** - React functional component that renders an SVG icon representing an image/photo
+- **`ImageIconProps`** — Interface defining optional `className` and `color` props
+- **`ImageIcon`** — ⚠️ Deprecated functional component; use `icons-v2-generated` instead
 
 ## Usage Example
 
 ```typescript
 import { ImageIcon } from './image-icon';
 
-// Basic usage with default styling
+// Default size and inherited color
 <ImageIcon />
 
-// Custom size and color
-<ImageIcon 
-  className="w-8 h-8" 
-  color="#3B82F6" 
-/>
-
-// Using with Tailwind classes
-<ImageIcon 
-  className="w-12 h-12 text-gray-500 hover:text-gray-700" 
-/>
-
-// In a button or container
-<button className="p-2 border rounded">
-  <ImageIcon className="w-5 h-5" />
-  Upload Image
-</button>
+// Custom size and explicit color
+<ImageIcon className="w-8 h-8" color="#FFC008" />
 ```
 
-The component features a rectangular frame with rounded corners, a small circle representing the sun/light source, and a diagonal line representing a mountain landscape - creating the universal symbol for images/photos. The SVG uses `currentColor` by default, allowing it to inherit text color from parent elements, or accepts a custom color prop for specific styling needs.
+## Notes
+
+> ⚠️ **Deprecated:** `ImageIcon` is marked for removal. Use the equivalent icon from `icons-v2-generated` for all new code.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `"w-6 h-6"` | Tailwind/CSS classes for sizing |
+| `color` | `string` | `currentColor` | Stroke and fill color override |

package/src/components/icons/.index.md

@@ -1,37 +1,34 @@
-<!-- source-hash: ab1136a5a5e05f694050400978e2e215 -->
-This file serves as the main export barrel for a deprecated icon library in the OpenFrame frontend system, providing access to over 150+ custom SVG icons organized by functional categories.
+<!-- source-hash: 482d4ff0bbd5bfd82d2f3d065a5094b1 -->
+Barrel export file for the **deprecated** icons v1 module, re-exporting all icon components from their individual files into a single entry point.
 
-## Key Components
-
-**Logo Icons**: Brand logos including OpenmspLogo, OpenFrameLogo, FlamingoLogo, ElestioLogo, and partner brands
-
-**Navigation Icons**: UI navigation elements like MenuIcon, SearchIcon, FilterIcon, HamburgerIcon, and feature-specific icons
+> ⚠️ **Deprecated** — Migrate to `@flamingo-stack/openframe-frontend-core/components/icons-v2` which provides 1600+ icons, a consistent API, better TypeScript support, and smaller bundle size.
 
-**UI State Icons**: Interactive state indicators including CheckCircleIcon, ErrorIcon, ThumbsUpIcon, RefreshIcon, and theme toggles (SunIcon/MoonIcon)
+## Key Components
 
-**Social & Brand Icons**: Platform icons for GitHub, Slack, Microsoft, Google, Reddit, LinkedIn, and other social platforms
+Exports are organized into the following categories:
 
-**System & Tool Icons**: Technical icons for operating systems (WindowsIcon, LinuxIcon, MacOSIcon), shell types (PowerShellIcon, BashIcon), and MSP tools
+| Category | Examples |
+|---|---|
+| Logo icons | `FlamingoLogo`, `OpenFrameLogo`, `OpenmspLogo` |
+| Navigation & feature | `SearchIcon`, `FilterIcon`, `DashboardIcon`, `DevicesIcon` |
+| UI state | `CheckCircleIcon`, `ErrorIcon`, `CopyIcon`, `SendIcon` |
+| Brand & social | `GitHubIcon`, `SlackIcon`, `MicrosoftIcon`, `GoogleLogo` |
+| Social platforms | `YouTubeIcon`, `InstagramIcon`, `TelegramIcon` |
+| OS icons | `WindowsIcon`, `MacOSIcon`, `LinuxIcon` |
+| Shell types | `PowerShellIcon`, `BashIcon`, `PythonIcon`, `DenoIcon` |
+| OpenFrame AI agents | `NaturalLanguageIcon`, `SmartEscalationIcon`, `AuditLoggingIcon` |
+| Trust page | `ShieldLockIcon`, `FolderShieldIcon`, `ShieldCheckIcon` |
+| Review platforms | `G2Icon`, `CapterraIcon`, `TrustpilotIcon` |
+| Utilities | `icon-utils` (wildcard), `device-type-icons` (wildcard) |
 
-**OpenFrame AI Icons**: Specialized icons for AI features like NaturalLanguageIcon, AutomatedDiagnosticsIcon, and SmartEscalationIcon
+Also exports `XIcon` aliased as `IconsXIcon` to avoid naming conflicts with `ui/custom-icons`.
 
 ## Usage Example
 
 ```typescript
-import { 
-  OpenFrameLogo, 
-  SearchIcon, 
-  GitHubIcon,
-  CheckCircleIcon 
-} from '@flamingo-stack/openframe-frontend-core/components/icons';
-
-// Use in React component
-<div>
-  <OpenFrameLogo />
-  <SearchIcon />
-  <GitHubIcon />
-  <CheckCircleIcon />
-</div>
-```
-
-**⚠️ Deprecation Notice**: This module is deprecated in favor of `icons-v2` which offers 1600+ icons with better TypeScript support and smaller bundle sizes. Migrate to the new module for future projects.
+// ❌ Deprecated — avoid
+import { CopyIcon, FlamingoLogo } from '@flamingo-stack/openframe-frontend-core/components/icons';
+
+// ✅ Recommended — use icons-v2 instead
+import { CopyIcon, FlamingoLogo } from '@flamingo-stack/openframe-frontend-core/components/icons-v2';
+```

package/src/components/icons/.info-circle-icon.md

@@ -1,39 +1,38 @@
-<!-- source-hash: 6367619b5d4aca77e0b519f66fd7bf34 -->
-A React SVG icon component that renders an information circle symbol (a circle with an "i" inside) for displaying informational content or help indicators.
+<!-- source-hash: 15d06bffcb880220dffaa9e2fd3f0a17 -->
+A deprecated SVG icon component that renders an info circle (ℹ️) symbol with configurable size and color.
 
 ## Key Components
 
-- **InfoCircleIcon** - Main functional component that renders the SVG icon
-- **InfoCircleIconProps** - TypeScript interface defining component props including styling options
-- **Flexible sizing system** - Supports both unified `size` prop or separate `width`/`height` props
+### `InfoCircleIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `""` | CSS class for the SVG element |
+| `color` | `string` | `"currentColor"` | Stroke color |
+| `size` | `number` | `24` | Sets both width and height |
+| `width` | `number` | `24` | SVG width (overridden by `size`) |
+| `height` | `number` | `24` | SVG height (overridden by `size`) |
+
+### `InfoCircleIcon` ⚠️ Deprecated
+Renders a 24×24 viewBox SVG info circle icon. `size` takes precedence over individual `width`/`height` props.
+
+> **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { InfoCircleIcon } from './info-circle-icon';
 
-function HelpTooltip() {
-  return (
-    <div className="help-container">
-      {/* Basic usage with default size (24px) */}
-      <InfoCircleIcon />
-      
-      {/* Custom size and color */}
-      <InfoCircleIcon 
-        size={20} 
-        color="#3B82F6" 
-        className="ml-2" 
-      />
-      
-      {/* Separate width and height */}
-      <InfoCircleIcon 
-        width={16} 
-        height={16} 
-        color="currentColor" 
-      />
-    </div>
-  );
-}
-```
-
-The component uses stroke-based SVG paths with customizable color (defaults to `currentColor` for CSS inheritance) and includes proper accessibility attributes. The sizing logic prioritizes the `size` prop, falling back to individual `width`/`height` props, and defaults to 24px when no dimensions are specified.
+// Basic usage
+<InfoCircleIcon />
+
+// Custom size and color
+<InfoCircleIcon size={32} color="#FFC008" />
+
+// Independent width/height
+<InfoCircleIcon width={20} height={20} className="ml-2" />
+
+// Inherits text color via currentColor
+<span className="text-blue-500">
+  <InfoCircleIcon size={16} />
+</span>
+```

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

@@ -1,35 +1,21 @@
-<!-- source-hash: 58f57835c97116d0a064b4157f7443f5 -->
-A React component that renders an Instagram icon as an SVG element with customizable styling properties.
+<!-- source-hash: 85d313cc0cc3c0b39f4f6063f485cbee -->
+Deprecated SVG Instagram icon React component with configurable stroke color and className props.
 
 ## Key Components
 
-- **InstagramIcon**: React functional component that renders the Instagram logo as an SVG
-- **InstagramIconProps**: TypeScript interface defining optional `color` and `className` props
+- **`InstagramIconProps`** — Interface with optional `color` (default: `'white'`) and `className` string props
+- **`InstagramIcon`** — ⚠️ Deprecated functional component rendering a 24×24 SVG Instagram icon using stroke-based styling
+
+> **Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Usage Example
 
 ```typescript
 import { InstagramIcon } from './instagram-icon';
 
-// Basic usage with default white color
+// Default white icon
 <InstagramIcon />
 
-// With custom color
-<InstagramIcon color="#E4405F" />
-
-// With CSS classes for styling
-<InstagramIcon 
-  className="hover:scale-110 transition-transform" 
-  color="#833AB4" 
-/>
-
-// In a social media links section
-<div className="flex space-x-4">
-  <InstagramIcon 
-    color="currentColor" 
-    className="w-6 h-6 text-gray-600 hover:text-pink-500" 
-  />
-</div>
-```
-
-The component uses a 24x24 viewBox and renders the classic Instagram camera icon with a rounded square border, circular lens, and dot flash indicator. The SVG is optimized for crisp rendering at various sizes and supports standard stroke-based styling.
+// Custom color and class
+<InstagramIcon color="#E1306C" className="social-icon" />
+```

package/src/components/icons/.jump-in-icon.md

@@ -1,31 +1,31 @@
-<!-- source-hash: 37be9eed23d9106673db152297b3093f -->
-React SVG icon component that renders a "jump in" interface symbol with customizable styling properties.
+<!-- source-hash: 0326f7a8424cebc8a21274a013e33147 -->
+A deprecated React SVG icon component rendering a "Jump In" icon (chart with a diagonal slash/cancel overlay) with configurable size, color, and className props.
 
 ## Key Components
 
-- **JumpInIcon**: Main functional component that renders an SVG icon
-- **JumpInIconProps**: TypeScript interface defining component props:
-  - `size`: Optional number for icon dimensions (default: 48px)
-  - `color`: Optional string for stroke color (default: 'white')  
-  - `className`: Optional string for additional CSS classes
+| Export | Type | Description |
+|--------|------|-------------|
+| `JumpInIcon` | `React.FC<JumpInIconProps>` | SVG icon component — **deprecated** |
+| `JumpInIconProps` | `interface` | Props interface for the component |
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `number` | `48` | Width and height of the SVG in pixels |
+| `color` | `string` | `'white'` | Stroke color of the icon paths |
+| `className` | `string` | `''` | Additional CSS class names |
 
 ## Usage Example
 
 ```typescript
 import { JumpInIcon } from './jump-in-icon';
 
-// Basic usage with defaults
+// Default usage
 <JumpInIcon />
 
-// Customized icon
-<JumpInIcon 
-  size={64} 
-  color="#3B82F6" 
-  className="hover:opacity-80 transition-opacity" 
-/>
-
-// Small icon for buttons
-<JumpInIcon size={24} color="currentColor" />
+// Custom size and color
+<JumpInIcon size={32} color="#FFC008" className="my-icon" />
 ```
 
-The icon features a computer/display symbol with an arrow pointing downward and is enclosed in a circle with a diagonal line through it, commonly used to represent "jump in" or "enter" actions in user interfaces. The SVG uses a 80x80 viewBox and scales proportionally based on the size prop.
+> ⚠️ **Deprecated:** This component is deprecated. Use icons from `icons-v2-generated` instead.