@glyx-dev/icons

A curated set of Lucide (opens in a new tab) icons for Glyx apps. Icons are rendered as inline SVG so they work without any asset pipeline — they support runtime color and size changes out of the box.

npm install @glyx-dev/icons

Basic usage

import { Icon } from '@glyx-dev/icons'
import { Tabs, Tab } from 'nextra/components'
 
export default function App() {
  return (
    <View style={{ flexDirection: 'row', gap: 12, padding: 20 }}>
      <Icon name="arrow-right" size={20} color="#000" />
      <Icon name="check-circle" size={24} color="#00A878" />
      <Icon name="alert-triangle" size={24} color="#F59E0B" />
      <Icon name="trash" size={20} color="#EF4444" />
    </View>
  )
}

Props

Prop	Type	Default	Description
`name`	`string`	—	Icon name (see list below)
`size`	`number`	`24`	Width and height in pixels
`color`	`string`	`'#000000'`	Stroke color — any CSS color value
`strokeWidth`	`number`	`2`	Stroke width
`style`	`object`	—	Additional style on the Image node

Theming

Pass color directly — no CSS variables needed. This makes icons trivial to adapt to any theme:

function ThemeAwareIcon({ name, size = 20 }) {
  const { isDark } = useTheme()
  return <Icon name={name} size={size} color={isDark ? '#E5E7EB' : '#111827'} />
}

In buttons and toolbars

import { Icon } from '@glyx-dev/icons'
import { Button } from '@glyx-dev/design'
 
function Toolbar({ onSave, onDelete }) {
  return (
    <View style={{ flexDirection: 'row', gap: 8 }}>
      <Pressable onPress={onSave} style={styles.iconBtn}>
        <Icon name="save" size={18} color="#fff" />
      </Pressable>
      <Pressable onPress={onDelete} style={[styles.iconBtn, styles.danger]}>
        <Icon name="trash" size={18} color="#fff" />
      </Pressable>
    </View>
  )
}
 
const styles = {
  iconBtn: {
    width: 36, height: 36,
    borderRadius: 6,
    backgroundColor: '#3B5BDB',
    alignItems: 'center', justifyContent: 'center',
  },
  danger: { backgroundColor: '#EF4444' },
}

Icon + label pattern

function MenuItem({ icon, label, onPress }) {
  return (
    <Pressable onPress={onPress} style={styles.row}>
      <Icon name={icon} size={18} color="#6B7280" />
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  )
}
 
const styles = {
  row:   { flexDirection: 'row', alignItems: 'center', gap: 10, padding: 10 },
  label: { fontSize: 14, color: '#111827' },
}
 
// Usage
<MenuItem icon="settings" label="Preferences" onPress={openSettings} />
<MenuItem icon="key"      label="Change password" onPress={openPassword} />
<MenuItem icon="globe"    label="Open in browser" onPress={openBrowser} />

Status indicators

function StatusBadge({ status }) {
  const map = {
    success: { icon: 'check-circle',   color: '#10B981' },
    error:   { icon: 'x-circle',       color: '#EF4444' },
    warn:    { icon: 'alert-triangle',  color: '#F59E0B' },
    info:    { icon: 'info',            color: '#3B5BDB' },
    loading: { icon: 'loader',          color: '#6B7280' },
  }
  const { icon, color } = map[status] ?? map.info
  return <Icon name={icon} size={16} color={color} />
}

Available icons

import { iconNames } from '@glyx-dev/icons'
console.log(iconNames()) // full list at runtime

Arrows

arrow-right arrow-left arrow-up arrow-down arrow-up-right arrow-down-left

Chevrons

chevron-right chevron-left chevron-up chevron-down chevrons-right chevrons-left

Actions

x check plus minus search menu more-horizontal more-vertical copy trash edit save refresh-cw filter sort-asc external-link

Status

check-circle x-circle alert-circle alert-triangle info loader

Navigation & UI

home settings user users bell star heart eye eye-off lock unlock maximize minimize

Files & Storage

file file-text folder download upload link image

Communication

mail message-square send

Date & Time

calendar clock

Media

play pause stop-circle volume-2 volume-x

Globe & Network

globe wifi

Theme

sun moon

Misc

tag zap key shield database code terminal cpu grid layout

Media

play pause stop-circle volume-2 volume-x

Network

globe wifi

Misc

tag zap key shield database code terminal cpu grid layout

How it works

Each icon is built as an SVG string at render time (with your color and size baked in), encoded as a data URI (data:image/svg+xml,...), and passed to <Image>. This means:

No file system access — works in snapshot and bundle modes
No extra build step or asset manifest
Color, size, and strokeWidth change without re-loading an asset
SVGs are rasterized by the same resvg pipeline as regular image files

Icons are MIT-licensed Lucide paths. strokeWidth defaults to 2, matching Lucide's design intent. Set it to 1.5 for a lighter look or 2.5 for bolder weight.

@glyx-dev/auth @glyx-dev/rich-text