@streamoid/icons

1867 SVG icons for Streamoid applications, built as React components. Every icon is a plain function component with an identical prop signature — size, color, strokeWidth, plus any SVG attribute.

The package is made of two sets:

• 120 Streamoid icons — hand-drawn brand and product icons (SiconCatalogix, SiconCredits, SiconPhotogenix…). Prefer these whenever a Streamoid concept has a dedicated icon.
• 1747 Lucide icons — the general-purpose 24×24 stroke set, for everything else.

👉 ICONS.md is the full searchable catalog of all 1867 exports, including the design-file name of each icon so you can look one up from a Figma layer name.

Installation

npm install @streamoid/icons

Usage

import { SiconHouse, SiconCredits } from "@streamoid/icons";

function App() {
  return (
    <>
      <SiconCredits size={16} color="var(--alias-text---icons-primary)" />
      <SiconHouse size={20} />
    </>
  );
}

Bundle size

Named imports tree-shake properly — importing one icon does not pull in the other 1866. Measured with esbuild (minified + gzipped, React excluded):

| | gzipped | |---|---| | Fixed cost of importing anything from the package | ~3.8 KB | | Each additional icon | ~150 B | | Whole unshaken set, for reference | 2.8 MB minified |

The ~3.8 KB fixed cost is not icon artwork — it's one CJS-interop call per source module for react/jsx-runtime, which the bundler can't eliminate. It's paid once, no matter how many icons you use.

Two things to avoid, both of which retain all 1867 icons:

import * as Icons from '@streamoid/icons';   // ❌ if you then index it dynamically
const Icon = Icons[name];                    // ❌ bundler can't tell which icons are reachable

If you need to pick an icon by name at runtime, build an explicit map of just the icons you use:

import { SiconHouse, SiconSettings } from '@streamoid/icons';

const ICONS = { house: SiconHouse, settings: SiconSettings };   // ✅ only these two ship

Props

All icons accept the same props:

| Prop | Type | Default | Description | |---------------|--------------------|------------------|-------------------------------------------------| | size | number \| string | 24 (16 for SiconCredits) | Sets both width and height | | color | string | "currentColor" | Any CSS colour value — applied to stroke/fill | | strokeWidth | number \| string | 1.25 | Stroke weight (stroke-based icons) | | className | string | — | Additional CSS class | | ...props | SVGProps | — | Any valid SVG element attribute |

Colouring the icons

color takes any string CSS colour value and is wired straight onto the icon's stroke (and fill, on the solid icons). All of these are valid:

<SiconHouse color="#F5F5F5" />                              {/* hex                */}
<SiconHouse color="rgb(245 245 245)" />                      {/* rgb / rgba         */}
<SiconHouse color="hsl(0 0% 96%)" />                         {/* hsl                */}
<SiconHouse color="tomato" />                                {/* CSS named colour   */}
<SiconHouse color="var(--alias-text---icons-primary)" />     {/* design token  ✅   */}
<SiconHouse color="var(--alias-text---icons-primary, #999)" /> {/* token + fallback */}

Prefer design tokens

Pass a token from @streamoid/tokens rather than a literal colour. Tokens follow the active theme, so the icon stays correct in both light and dark mode with no extra work:

<SiconSettings color="var(--alias-text---icons-primary)" />
<SiconWarning  color="var(--alias-text---icons-warning)" />

Let CSS drive the colour (recommended for interactive icons)

The default is currentColor, so if you omit color the icon inherits the CSS color of its context. That's what you want for hover, focus and disabled states — one CSS rule recolours the icon with no React state:

<button className="icon-btn">
  <SiconClose size={16} />   {/* no color prop → follows the button's CSS color */}
</button>

.icon-btn        { color: var(--alias-text---icons-secondary); }
.icon-btn:hover  { color: var(--alias-text---icons-primary); }
.icon-btn:disabled { color: var(--alias-text---icons-disabled); }

The same trick works inline — style={{ color: "red" }} recolours the icon, because the spread lands on the <svg> and currentColor resolves against it:

<SiconHouse style={{ color: "red" }} />   {/* red, via currentColor */}

⚠️ This only works while color is left at its default. Passing color writes a literal onto the paths and CSS inheritance no longer applies.

Sizing and stroke weight

size sets width and height together; pass a number (px) or any CSS length string:

<SiconHouse size={16} />       <SiconHouse size="1.25rem" />   <SiconHouse size="100%" />

Stroke icons are drawn on a 24×24 grid at strokeWidth 1.25. When you scale an icon well past 24px the stroke can look thin — nudge strokeWidth up to compensate:

<SiconHouse size={48} strokeWidth={1.5} />

Known limitations

• fill cannot be overridden by props. The <svg> sets fill="none" after the prop spread, so an explicit fill is ignored. Use color — it drives the fill on solid icons.
• width / height are not accepted (they're Omitted from the type). Use size.
• SiconSaveOff carries a fixed clipPath id from the design export. Rendering it many times on one page duplicates that id; the clip geometry is identical so it still renders correctly.

Icon Reference

The tables below describe the 120 Streamoid icons. For the Lucide set — 1747 icons, too many to annotate here — see the generated ICONS.md catalog.

General Icons

| Export | File | Description | |---------------------|-------------------------|------------------------------------| | SiconArtifacts | sicon-artifacts | Artifacts / documents | | SiconAttach | sicon-attach | Attachment / paperclip | | SiconBilling | sicon-billing | Billing / credit card | | SiconBolt | sicon-bolt | Lightning bolt / actions | | SiconBrain | sicon-brain | AI / intelligence | | SiconCart | sicon-Cart | Shopping cart | | SiconCatalog | sicon-catalog | Product catalog | | SiconCatalogix | sicon-catalogix | Catalogix feature | | SiconClose | sicon-close | Close / dismiss (X) | | SiconCoins | sicon-Coins | Stacked coins (stroke, 24px) | | SiconCollapse | sicon-collapse | Collapse / chevron | | SiconCredits | sicon-credits | Credits / sparkle-coin (stroke, 16px) — added v0.1.3 | | SiconCrown | sicon-Crown | Crown / premium | | SiconDark | sicon-dark | Dark mode | | SiconDelete | sicon-delete | Delete / trash | | SiconDot | sicon-dot | Dot / indicator | | SiconDoubleArrow | sicon-double-Arrow | Double arrow (horizontal) | | SiconDoubleArrowDown | sicon-double-ArrowDown | Double arrow down | | SiconDoubleArrowUp | sicon-double-ArrowUp | Double arrow up | | SiconDownload | sicon-download | Download | | SiconFolder | sicon-Folder | Folder | | SiconHome | sicon-Home | Home | | SiconImage | sicon-image | Image / photo | | SiconInsights | sicon-insights | Insights / analytics | | SiconLeft | sicon-left | Arrow left | | SiconLight | sicon-Light | Light mode | | SiconLock | sicon-lock | Lock / security | | SiconLogout | sicon-logout | Logout | | SiconMeasure | sicon-measure | Measurement / ruler | | SiconMinus | sicon-minus | Minus / subtract — added v0.1.3 | | SiconMore | sicon-more | More options (ellipsis) | | SiconPhotogenix | sicon-photogenix | Photogenix feature | | SiconPlus | sicon-plus | Plus / add | | SiconPulse | sicon-pulse | Pulse / activity | | SiconReferral | sicon-referral | Referral / link | | SiconRight | sicon-right | Arrow right | | SiconScout | sicon-scout | Scout feature | | SiconSearch | sicon-Search | Search / magnifier | | SiconSend | sicon-send | Send / submit | | SiconSettings | sicon-settings | Settings / gear | | SiconSupport | sicon-support | Support / help | | SiconSwitch | sicon-switch | Switch / swap | | SiconSystem | sicon-system | System / monitor | | SiconTeam | sicon-team | Team / people | | SiconUpload | sicon-upload | Upload | | SiconUser | sicon-User | Single user / profile | | SiconUserAdd | sicon-userAdd | Add user | | SiconWorkspace | sicon-workspace | Workspace |

Icons v4

| Export | File | Description | |-----------------------|-------------------------|------------------------------------| | SiconLowCredits | sicon-lowCredits | Low credits / partial circle | | SiconAppSwitchAlt | sicon-appSwitchAlt | App switch (diamond / chain shape) | | SiconAppSwitchV2 | sicon-appSwitchV2 | App switch with circular refresh | | SiconApps | sicon-apps | Apps / layered diamonds | | SiconArrowLeftRight | sicon-arrowLeftRight | Bidirectional arrow (left–right) | | SiconCanvas | sicon-canvas | Canvas / dotted grid (fill-based) | | SiconExpand | sicon-expand | Expand / sidebar panel | | SiconWarning | sicon-warning | Warning / triangle alert |

Icons v5 (stroke)

| Export | File | Description | |------------------------|-----------------------|-----------------------------------------------| | SiconAngleArrow | sicon-angleArrow | Diagonal arrow (↗) | | SiconHeart | sicon-heart | Heart / favourite | | SiconCheck | sicon-check | Checkmark / done | | SiconGrid | sicon-grid | Grid view (4 equal cells) | | SiconList | sicon-list | List view (3 rows) — distinct from SiconMenu | | SiconInteract | sicon-interact | Interact / cursor in frame | | SiconPointer | sicon-pointer | Pointer / click hand | | SiconWeb | sicon-web | Web / globe — distinct from SiconGlobe | | SiconPaste | sicon-paste | Paste / clipboard | | SiconKeyAlt | sicon-keyAlt | Key (detailed) — distinct from SiconKey | | SiconBrandDna | sicon-brandDna | Brand DNA / helix | | SiconBestsellers | sicon-bestsellers | Bestsellers / trending up | | SiconMaterials | sicon-materials | Materials / layers | | SiconScan | sicon-scan | Scan (frame + magnifier) | | SiconForesight | sicon-foresight | Foresight / target | | SiconPrintsPatterns | sicon-printsPatterns | Prints & patterns (quadrant) | | SiconMoodboards | sicon-moodboards | Moodboards / image frame | | SiconRangePlans | sicon-rangePlans | Range plans (bento layout) | | SiconTechpacks | sicon-techpacks | Techpacks / document | | SiconProjects | sicon-projects | Projects / open folder | | SiconTools | sicon-tools | Tools | | SiconStudioX | sicon-studioX | Studio X | | SiconRender | sicon-render | Render / image + upload | | SiconCxo | sicon-cxo | CXO |

Icons v5 (filled / Material-Symbols style)

These are solid-fill icons. Where a name collides with an existing stroke icon it takes a Solid suffix, so both styles remain available.

| Export | File | Description | |------------------------------|-------------------------------|------------------------------------------| | SiconBackgroundChangeSolid | sicon-backgroundChangeSolid | Background change (filled) | | SiconAdCreatorSolid | sicon-adCreatorSolid | Ad creator / broadcast (filled) | | SiconAdCreatorAltSolid | sicon-adCreatorAltSolid | Ad creator alt (filled) | | SiconOnModelPhotoSolid | sicon-onModelPhotoSolid | On-model photo (filled) | | SiconFlatLaySolid | sicon-flatLaySolid | Flat lay (filled) | | SiconSwatchSolid | sicon-swatchSolid | Swatch (filled) | | SiconVideo | sicon-video | Video / play in circle | | SiconUgcSolid | sicon-ugcSolid | UGC (filled) | | SiconStores | sicon-stores | Stores / storefront | | SiconBatchesSolid | sicon-batchesSolid | Batches (filled) | | SiconListing | sicon-listing | Listing / document with lines | | SiconModelTraining | sicon-modelTraining | Model training | | SiconAnalytics | sicon-analytics | Analytics / bar chart | | SiconProjectsSolid | sicon-projectsSolid | Projects / folder (filled) | | SiconScoutSolid | sicon-scoutSolid | Scout (filled) | | SiconTechpax | sicon-techpax | Techpax / measure | | SiconDreamboard | sicon-dreamboard | Dreamboard | | SiconPulseSolid | sicon-pulseSolid | Pulse (filled) | | SiconVideoAdCreator | sicon-videoAdCreator | Video ad creator |

Icons v6 (Lucide 24px stroke set)

1747 icons from the July 2026 icon drop — the general-purpose Lucide set, converted verbatim from the delivered SVGs. All are 24×24, stroke-based, and share the standard props above.

They are not listed here individually. See ICONS.md for the full catalog with design-file names.

Export naming — the design name is kebab-case; the export is Sicon + PascalCase:

| Design name | Export | File | |--------------------|-----------------------|----------------------------| | house | SiconHouse | sicon-house | | a-arrow-down | SiconAArrowDown | sicon-aArrowDown | | align-center-vertical | SiconAlignCenterVertical | sicon-alignCenterVertical | | clock-1 | SiconClock1 | sicon-clock1 |

Six delivered files carried a Figma copy-suffix with no base file present (activity 3.svg, bolt 4.svg, clock-1 3.svg, image 5.svg, loader 3.svg, map 3.svg). The suffix is an export artifact, so it is dropped — activity 3.svg is exported as SiconActivity.

Name collisions

31 of the delivered icons share a name with an existing Streamoid icon.

minus was byte-identical to SiconMinus, so nothing was added — keep using SiconMinus.

The other 30 are a genuinely different drawing (the Streamoid versions are single merged paths; the Lucide ones are multi-path). Both are kept: the Streamoid icon keeps its name and the Lucide variant takes an Alt suffix, the same convention the Solid icons use. No existing export changed, so nothing that already consumes this package is affected.

| Streamoid (unchanged) | Lucide variant | Design name | |------------------------|---------------------------|--------------------| | SiconArrowLeftRight | SiconArrowLeftRightAlt | arrow-left-right | | SiconBolt | SiconBoltAlt | bolt | | SiconBrain | SiconBrainAlt | brain | | SiconCheck | SiconCheckAlt | check | | SiconCoins | SiconCoinsAlt | coins | | SiconCrown | SiconCrownAlt | crown | | SiconDelete | SiconDeleteAlt | delete | | SiconDot | SiconDotAlt | dot | | SiconDownload | SiconDownloadAlt | download | | SiconExpand | SiconExpandAlt | expand | | SiconFolder | SiconFolderAlt | folder | | SiconFrame | SiconFrameAlt | frame | | SiconGlobe | SiconGlobeAlt | globe | | SiconHand | SiconHandAlt | hand | | SiconHeart | SiconHeartAlt | heart | | SiconImage | SiconImageAlt | image | | SiconKey | SiconKeyAlt2 | key | | SiconList | SiconListAlt | list | | SiconLock | SiconLockAlt | lock | | SiconLogout | SiconLogOutAlt | log-out | | SiconMenu | SiconMenuAlt | menu | | SiconPlus | SiconPlusAlt | plus | | SiconPointer | SiconPointerAlt | pointer | | SiconScan | SiconScanAlt | scan | | SiconSearch | SiconSearchAlt | search | | SiconSend | SiconSendAlt | send | | SiconSettings | SiconSettingsAlt | settings | | SiconUpload | SiconUploadAlt | upload | | SiconUser | SiconUserAlt | user | | SiconVideo | SiconVideoAlt | video |

key is the one irregular name: SiconKeyAlt was already taken by an earlier v5 icon, so the Lucide key is SiconKeyAlt2.

⚠️ Two of these pairs differ in meaning, not just style — check before swapping:

• SiconDelete is a trash can; SiconDeleteAlt is the Lucide delete icon, a backspace key.
• SiconList is three plain lines; SiconListAlt is a bulleted list (dots + lines).

Adding a New Icon

1. Create src/sicon-<name>.tsx following the pattern:

import type { SVGProps } from 'react';

export type IconProps = Omit<SVGProps<SVGSVGElement>, 'color' | 'strokeWidth' | 'width' | 'height'> & {
  color?: string;
  strokeWidth?: number | string;
  size?: number | string;
};

const SiconName = ({ color = 'currentColor', strokeWidth = 1.25, size = 24, ...props }: IconProps) => {
  return (
    <svg
      {...props}
      width={size}
      height={size}
      strokeWidth={strokeWidth}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      {/* paste the SVG paths here, then swap the hard-coded colour for the props: */}
      {/*   stroke="#F5F5F5"  ->  stroke={color} strokeWidth={strokeWidth}        */}
      {/*   fill="#F5F5F5"    ->  fill={color}                                    */}
      {/* and camelCase the attributes: stroke-linecap -> strokeLinecap           */}
      <path d="…" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
};

export default SiconName;

Keep the geometry exactly as delivered — only the colour and stroke weight become props.

2. Export from src/index.ts:

export { default as SiconName } from './sicon-name';

3. Add a row to the Icon Reference table in this README (Streamoid icons) or to ICONS.md (Lucide set).

4. Build: npm run build in packages/icons

Changelog

v0.5.0

• Added the Lucide 24px stroke set — 1747 icons from the July 2026 drop, taking the package from 120 to 1867 icons. Converted verbatim from the delivered SVGs: geometry untouched, only the hard-coded #F5F5F5 swapped for the color / strokeWidth props.
• 31 of the 1748 delivered SVGs collided with an existing name. minus was byte-identical and skipped; the other 30 are a different drawing and were added with an Alt suffix — see Name collisions. No existing export changed.
• Added ICONS.md — generated catalog of all 1867 exports with their design-file names.
• Expanded this README with a full colouring guide.

v0.4.4

• Added 43 new icons from the latest design drop (9 of the 52 delivered SVGs were exact duplicates of existing v4 icons and were skipped).
  • 24 stroke icons: SiconAngleArrow, SiconHeart, SiconCheck, SiconGrid, SiconList, SiconInteract, SiconPointer, SiconWeb, SiconPaste, SiconKeyAlt, SiconBrandDna, SiconBestsellers, SiconMaterials, SiconScan, SiconForesight, SiconPrintsPatterns, SiconMoodboards, SiconRangePlans, SiconTechpacks, SiconProjects, SiconTools, SiconStudioX, SiconRender, SiconCxo.
  • 19 filled (Material-Symbols style) icons: SiconBackgroundChangeSolid, SiconAdCreatorSolid, SiconAdCreatorAltSolid, SiconOnModelPhotoSolid, SiconFlatLaySolid, SiconSwatchSolid, SiconVideo, SiconUgcSolid, SiconStores, SiconBatchesSolid, SiconListing, SiconModelTraining, SiconAnalytics, SiconProjectsSolid, SiconScoutSolid, SiconTechpax, SiconDreamboard, SiconPulseSolid, SiconVideoAdCreator.

v0.1.4

• Added 8 new icons: SiconLowCredits, SiconAppSwitchAlt, SiconAppSwitchV2, SiconApps, SiconArrowLeftRight, SiconCanvas, SiconExpand, SiconWarning.

v0.1.3

• Added SiconCredits — credits/sparkle-coin icon (16×16 viewBox, stroke-based). Used in workspace credits badge.

v0.1.2

• Initial public release with 46 icons.

License

ISC