@nrbx/lucide

Lucide icons for Roblox React (@rbxts/react)

A roblox-ts package that brings Lucide Roblox. Over 1,700 icons available as typed React components, with support for dynamic lookup, icon combining, and full Roblox ImageLabel props.

DISCLAIMER: This package does not publish the icons following icons and icon tags due to Roblox trust and moderation TOS: cannabis, cannabis-off, bomb, qr-code, scan-qr-code, alcohol, brewery, beer, cannabis, bomb, explosive, smoking

DEVELOPERS NEEDED: @nrbx/lucide is looking for development help! If you are interested in helping out, mainly towards our filled icons library, please you are welcome to build on top of what we have and make a pull request, we're active and always happy to receive contributions! Our filled Icons library is an active work in progress, and is very broken from it not being very advanced (and because I don't truly understand how to achieve what I want to do without a lot of manual adobe illustrator work), its available to use, but contributions to improve it are always welcome!

Installation

npm install @nrbx/lucide
yarn add @nrbx/lucide
pnpm add @nrbx/lucide

Add to your Rojo project file under node_modules:

"node_modules": {
  "$className": "Folder",
  "@rbxts": {
    "$path": "node_modules/@rbxts"
  },
  "@nrbx": {
    "$path": "node_modules/@nrbx"
  }
}

And to your tsconfig.json:

"typeRoots": ["node_modules/@rbxts", "node_modules/@nrbx"]

Quick Start

import React from "@rbxts/react";
import { Activity } from "@nrbx/lucide";

function MyComponent() {
    return (
        <frame Size={new UDim2(0, 200, 0, 200)}>
            <Activity
                Size={new UDim2(0, 48, 0, 48)}
                Position={new UDim2(0, 10, 0, 10)}
                ImageColor3={new Color3(1, 1, 1)}
            />
        </frame>
    );
}

Usage

Named Icon Components

Every icon is available as a PascalCase named export:

import { ArrowRight } from "@nrbx/lucide";

<ArrowRight Size={new UDim2(0, 32, 0, 32)} />

Dynamic Icon (DynamicIcon)

Resolve an icon by its kebab-case name string at runtime:

import { DynamicIcon } from "@nrbx/lucide";

const iconName = "activity";

<DynamicIcon name={iconName} Size={new UDim2(0, 48, 0, 48)} />

Filled icons (Experimental)

Append -fill to any icon name to use its filled (solid) variation instead of the default outline style. EXTREME CAUTION: The filled icons library is an experimental work in progress, and is very broken. Use at your own risk, many icons are malformed or missing, and some icons are not filled at all. If you want to help improve the filled icons library, please fork and make a pull request of our repo, we're active and always happy to receive contributions.

<DynamicIcon name="circle-fill" Size={new UDim2(0, 48, 0, 48)} />
<DynamicIcon name="star-fill" Size={new UDim2(0, 48, 0, 48)} />

import { ArrowRightFill } from "@nrbx/lucide";

<ArrowRightFill Size={new UDim2(0, 32, 0, 32)} />

Icon Combining (CombineIcons)

Layer multiple icons together — Lucide's icon composition pattern:

import { CombineIcons } from "@nrbx/lucide";

// Places "check" on top of "circle"
<CombineIcons icons={["circle", "check"]} Size={new UDim2(0, 64, 0, 64)} />

Nesting Children

Icons support standard React children — nest icons within each other:

import { Circle, Check } from "@nrbx/lucide";

<Circle Size={new UDim2(0, 64, 0, 64)}>
    <Check Size={new UDim2(0.5, 0, 0.5, 0)} Position={new UDim2(0.25, 0, 0.25, 0)} />
</Circle>

🔧 Props

All icon components accept standard Roblox ImageLabel properties plus:

| Prop | Type | Description | |------|------|-------------| | icon | string | Icon identifier in kebab-case (e.g. arrow-right, bell) — only on IconTemplate | | name | string | Icon identifier in kebab-case — only on DynamicIcon | | icons | string[] | Array of icon identifiers to combine — only on CombineIcons | | children | React.ReactNode | Nested content for icon combining |

All standard ImageLabel props are supported: Size, Position, ImageColor3, BackgroundTransparency, AnchorPoint, ZIndex, Visible, LayoutOrder, Event, Change, Tag, ref, and more.

Defaults applied (overridable via props):

• Size — UDim2.fromOffset(24, 24)
• BackgroundTransparency — 1 (transparent background)
• ScaleType — "Fit"

Utility Functions

| Function | Returns | Description | |----------|---------|-------------| | GetIconData(name) | IconData \| undefined | Full icon metadata (id, title, assetId, uri, contributors) | | GetIconUri(name) | string | The rbxassetid:// URI string for the icon | | GetAllIcons() | IconData[] | Array of all available icon metadata entries |

License

MIT — see LICENSE.txt

Built with Lucide icons • roblox-ts • @rbxts/react