@nukeplatform/nuke-icons

Cross-platform icon library for React (web) and React Native. Ships 1,500+ Lucide icons and 25+ custom icon sets with automatic platform resolution.

Installation

npm install @nukeplatform/nuke-icons
# or
pnpm add @nukeplatform/nuke-icons
# or
yarn add @nukeplatform/nuke-icons

Web projects

No additional dependencies required. Lucide icons are loaded from lucide-react (bundled).

React Native projects

Install the optional peer dependencies:

npm install react-native react-native-svg @tamagui/lucide-icons

Usage

Lucide icons

All Lucide icons are available via the /lucide subpath:

import { Home, Settings, User, ChevronDown } from '@nukeplatform/nuke-icons/lucide'

function App() {
  return <Home size={24} color="#333" />
}

Props:

| Prop | Type | Default | Description | | ------- | -------- | ---------------- | ------------------------------ | | size | number | 20 | Icon width and height in px | | color | string | 'currentColor' | Any valid CSS color |

On web, icons are async-loaded from lucide-react with an empty placeholder shown during load. On native, icons load synchronously from @tamagui/lucide-icons.

Custom icons

import {
  ClockArrow,
  BonusWalletIcon,
  NukeLogo,
  Browse,
  QRMock,
  SafariIcon,
  ChromeIcon,
} from '@nukeplatform/nuke-icons'

<ClockArrow size={24} color="#52A9FF" />
<NukeLogo width={65} color="#0954A5" />
<Browse width={24} height={24} color="#52A9FF" />

Currency icons

Individual currency icons and a dynamic mapper utility:

import {
  BitcoinIcon,
  EthereumIcon,
  UsdtIcon,
  getCurrencyIcon,
  CURRENCY_COLORS,
  FallbackCurrencyIcon,
} from '@nukeplatform/nuke-icons'

// Direct usage
<BitcoinIcon size={28} />
<EthereumIcon size={28} />

// Dynamic lookup by symbol
const icon = getCurrencyIcon('BTC', 28)
// Supports aliases: 'BTC', 'BITCOIN', 'ETH', 'ETHEREUM', 'USDT', 'TETHER', etc.

// Fallback for unsupported currencies
<FallbackCurrencyIcon size={28} symbol="?" color="#888" />

Supported currencies: BTC, ETH, USDT, USDC, BNB, XRP, ADA, SOL, DOT, DOGE, MATIC, LTC, TRX, AVAX, LINK, USD, EUR, GBP, JPY, CNY, AUD, CAD, CHF, INR, RUB, KRW, BRL, ZAR, MXN, and more.

Social icons

Brand-colored social/auth provider icons:

import {
  GoogleIcon,
  FacebookIcon,
  AppleIcon,
  TwitchIcon,
  VkIcon,
  TelegramIcon,
  WhatsAppIcon,
  TwitterIcon,
  GitHubIcon,
  DiscordIcon,
} from '@nukeplatform/nuke-icons'

<GoogleIcon size={20} />
<FacebookIcon size={20} />
<DiscordIcon size={20} />

Props:

| Prop | Type | Default | Description | | ------ | -------- | ------- | --------------------------- | | size | number | 20 | Icon width and height in px |

Each icon uses its official brand color (e.g. Google multicolor, Facebook blue, Discord blurple).

Toast icons

import {
  ToastSuccessIcon,
  ToastErrorIcon,
  ToastWarningIcon,
  ToastInfoIcon,
} from '@nukeplatform/nuke-icons'

<ToastSuccessIcon size={24} />

Navigation icons

import { SlotsIcon, LiveCasinoIcon, SportsIcon } from '@nukeplatform/nuke-icons'

<SlotsIcon size={24} color="#EAF6FF" />

Ranking numbers

import {
  RankingOne, RankingTwo, RankingThree,
  // ... through RankingTen
} from '@nukeplatform/nuke-icons'

<RankingOne />

Icon Provider (performance optimization)

For apps rendering many icons, use the provider to get memoized, stable icon instances:

import { IconProvider, useStableIcons } from '@nukeplatform/nuke-icons'

// Wrap your app
<IconProvider>
  <App />
</IconProvider>

// Use stable icons in components
function Profile() {
  const icons = useStableIcons()
  return <div>{icons.personal}</div>
}

Available stable icons: personal, scan, map, dollar, activity, chevronDown, chevronUp.

How it works

The package uses conditional exports in package.json to serve platform-specific code:

• Web (default): Uses inline SVG elements via lucide-react. No native dependencies required.
• React Native (react-native): Uses react-native-svg and @tamagui/lucide-icons.

Bundlers like webpack, Vite, and Metro automatically resolve the correct entry point.

Color handling

Pass any CSS color string ('#333', 'red', 'rgb(0,0,0)') on both web and native. Each icon has a sensible default fallback color if none is provided.

Available custom icon sets

| Export | Props | | ------------------------ | ---------------------------------------------- | | ClockArrow | size, width, height, color | | BonusWalletIcon | size, color | | NukeLogo | width, height, color | | Browse | width, height, color | | QRMock | size, color | | SafariIcon | size, color | | ChromeIcon | size, color | | SlotsIcon | size, color | | LiveCasinoIcon | size, color | | SportsIcon | size, color | | VisaIcon | width, height | | MastercardIcon | width, height | | ApplePayIcon | width, height | | GooglePayIcon | width, height | | MoonPayLogo | width, height | | PaymentMethodsIcon | width, height | | ResponsibleGamblingIcon| size | | ProvablyFairIcon | size, color | | LicensedIcon | size | | SwappedLogo | - | | ToastSuccessIcon | size, width, height | | ToastErrorIcon | size, width, height | | ToastWarningIcon | size, width, height | | ToastInfoIcon | size, width, height | | FallbackCurrencyIcon | size, symbol, color | | GoogleIcon | size | | FacebookIcon | size | | AppleIcon | size | | TwitchIcon | size | | VkIcon | size | | TelegramIcon | size | | WhatsAppIcon | size | | TwitterIcon | size | | GitHubIcon | size | | DiscordIcon | size | | RankingOne - Ten | - |

Dependencies

| Dependency | Type | Required for | | ----------------------- | ---------------- | ------------------- | | lucide-react | dependency | Web icons | | react | peer | Always | | react-native | optional peer | React Native only | | @tamagui/lucide-icons | optional peer | React Native only | | react-native-svg | optional peer | React Native only |

License

Private - Nuke Platform