nalarx-uiComponents
Icon
One outline icon set for every NalarX surface, drawn on a 24px grid in the current text colour.
bunx shadcn@latest add @nalarx/iconUsage
import { Icon } from "@/components/ui/nx/Icon";
<Icon name="search" />
<Icon name="alert-triangle" label="Warning" />Sizes and stroke
Colour
The icon takes currentColor, so set the text colour on it or its parent.
Unknown names
A name the set does not know draws a neutral rounded square with a dot, never an empty box.
All glyphs
adobe
airbnb
airtable
alert-triangle
amazon
amazon-aws
android
angular
anthropic
apple
applemusic
archive
arrow-left
arrow-right
arrow-up-right
asana
asterisk
atlassian
azure
bell
bigquery
bitbucket
bitcoin
bloomberg
bluesky
bolt
book
box
brain
building
calendar
calendly
canva
chart
chat
check
check-circle
chevron-down
chevron-right
chrome
claude
clock
cloud
cloud-drizzle
cloud-fog
cloud-lightning
cloud-moon
cloud-rain
cloud-snow
cloud-sun
cloudflare
confluence
convertkit
copy
cpu
css3
database
datadog
discord
doc
docker
dot
download
dropbox
droplet
edge
edit
elasticsearch
ethereum
evernote
external
eye
eye-off
facebook
figma
file-code
file-image
file-sheet
file-slides
filter
firebase
firefox
fit
flag
folder
framer
gear
gemini
ghost
github
gitlab
globe
gmail
go
google
google-analytics
google-calendar
google-cloud
google-docs
google-drive
google-meet
google-sheets
greenhouse
grip
gworkspace
help-circle
home
html5
hubspot
huggingface
ifttt
illustrator
inbox
info
info-ref
instagram
instapaper
intercom
java
javascript
jira
kubernetes
langchain
layers
linear
linkedin
linux
loader
lock
logout
logout-ref
loom
mail
mail-ref
mailchimp
mailgun
make
mariadb
mastercard
medium
menu-dots
microsoft
microsoft-excel
microsoft-teams
midjourney
miro
mixpanel
monday
mongodb
monitor
moon
mysql
n8n
netlify
nextjs
nodejs
notion
obsidian
odoo
onedrive
openai
outlook
pagerduty
pause
paypal
pencil
perplexity
photoshop
php
pin
pinterest
play
plug
plus
postgres
postgresql
python
question
react
reddit
redis
refresh
replicate
reply
route
rust
safari
sales-delivery
salesforce
sap
scroll
search
send
sendgrid
sentry
share
shield
shield-check
shopify
sidebar
sketch
slack
sliders
sliders-ref
snowflake
sort
sparkle
spotify
sqlite
stackoverflow
star
stop
stripe
stripe-payment
substack
sun
supabase
svelte
tailwindcss
target
telegram
threads
tiktok
trash
trello
triangle
twitch
twitter-x
typeform
typescript
uber
ubuntu
upload
user
users
users-ref
vercel
visa
vscode
vue
wallet
webflow
whatsapp
whatsapp-ref
windows
wix
wordpress
workday
x
youtube
zap
zapier
zendesk
zoom
adobe
airbnb
airtable
alert-triangle
amazon
amazon-aws
android
angular
anthropic
apple
applemusic
archive
arrow-left
arrow-right
arrow-up-right
asana
asterisk
atlassian
azure
bell
bigquery
bitbucket
bitcoin
bloomberg
bluesky
bolt
book
box
brain
building
calendar
calendly
canva
chart
chat
check
check-circle
chevron-down
chevron-right
chrome
claude
clock
cloud
cloud-drizzle
cloud-fog
cloud-lightning
cloud-moon
cloud-rain
cloud-snow
cloud-sun
cloudflare
confluence
convertkit
copy
cpu
css3
database
datadog
discord
doc
docker
dot
download
dropbox
droplet
edge
edit
elasticsearch
ethereum
evernote
external
eye
eye-off
facebook
figma
file-code
file-image
file-sheet
file-slides
filter
firebase
firefox
fit
flag
folder
framer
gear
gemini
ghost
github
gitlab
globe
gmail
go
google
google-analytics
google-calendar
google-cloud
google-docs
google-drive
google-meet
google-sheets
greenhouse
grip
gworkspace
help-circle
home
html5
hubspot
huggingface
ifttt
illustrator
inbox
info
info-ref
instagram
instapaper
intercom
java
javascript
jira
kubernetes
langchain
layers
linear
linkedin
linux
loader
lock
logout
logout-ref
loom
mail
mail-ref
mailchimp
mailgun
make
mariadb
mastercard
medium
menu-dots
microsoft
microsoft-excel
microsoft-teams
midjourney
miro
mixpanel
monday
mongodb
monitor
moon
mysql
n8n
netlify
nextjs
nodejs
notion
obsidian
odoo
onedrive
openai
outlook
pagerduty
pause
paypal
pencil
perplexity
photoshop
php
pin
pinterest
play
plug
plus
postgres
postgresql
python
question
react
reddit
redis
refresh
replicate
reply
route
rust
safari
sales-delivery
salesforce
sap
scroll
search
send
sendgrid
sentry
share
shield
shield-check
shopify
sidebar
sketch
slack
sliders
sliders-ref
snowflake
sort
sparkle
spotify
sqlite
stackoverflow
star
stop
stripe
stripe-payment
substack
sun
supabase
svelte
tailwindcss
target
telegram
threads
tiktok
trash
trello
triangle
twitch
twitter-x
typeform
typescript
uber
ubuntu
upload
user
users
users-ref
vercel
visa
vscode
vue
wallet
webflow
whatsapp
whatsapp-ref
windows
wix
wordpress
workday
x
youtube
zap
zapier
zendesk
zoom
Props
| Prop | Type | Default | |
|---|---|---|---|
name | IconName | string | Glyph name. ICON_NAMES lists them all. | |
size | number | 16 | Box size in px. |
stroke | number | 1.5 | Stroke width on the 24px grid. |
label | string | Accessible name. Without it the icon is decorative (aria-hidden). | |
className, style | Passed to the svg. |
Accessibility
Inside a button or next to text, leave label off: the button or the text names the action. Give label only to an icon that carries meaning on its own, such as a status mark in a table cell.
Replaces
Icon in apps/web and apps/admin components/ui/Icon.tsx. The props are unchanged.