Overview

@pxlkit/ui is a themed icon pack for the Pxlkit ecosystem containing 41 icons (36 static + 5 animated) designed for interface controls, editor tools, navigation, and common UI actions.

Installation

npm install @pxlkit/core @pxlkit/ui

@pxlkit/core is required as a dependency for rendering components.

Quick Start

import { PxlKitIcon, AnimatedPxlKitIcon } from '@pxlkit/core';
import { Home, LoadingSpinner } from '@pxlkit/ui';

// Static UI icon
<PxlKitIcon icon={Home} size={32} colorful />

// Animated loading spinner
<AnimatedPxlKitIcon icon={LoadingSpinner} size={32} colorful />

Icons

Static Icons (36)

| Icon | Name | Description | | --- | --- | --- | | ✏️ | Pencil | Edit / draw | | 🧹 | Eraser | Erase / clear | | 🪣 | PaintBucket | Fill / paint | | 💉 | Eyedropper | Color picker | | ▶️ | Play | Play / start | | ⏸️ | Pause | Pause | | ↩️ | Undo | Undo action | | ↪️ | Redo | Redo action | | ✖️ | Close | Close / dismiss | | ✔️ | Check | Confirm / done | | 🎨 | Palette | Color palette | | 🤖 | Robot | AI / automation | | 📦 | Package | Package / module | | ✨ | SparkleSmall | Sparkle / new | | ➡️ | ArrowRight | Arrow right / next | | 🏠 | Home | Home / dashboard | | 🔍 | Search | Search / find | | ⚙️ | Settings | Settings | | ⚙️ | Gear | Gear / config | | ☰ | Menu | Menu / hamburger | | ⋯ | DotsMenu | More options | | 📊 | Grid | Grid view | | 📋 | List | List view | | 🗑️ | Trash | Delete / remove | | ✏️ | Edit | Edit / modify | | 📋 | Copy | Copy / duplicate | | 🔗 | ChainLink | Link / chain | | ↗️ | ExternalLink | External link | | ⬇️ | Download | Download | | ⬆️ | Upload | Upload | | 🕐 | History | History / recent | | 📅 | Calendar | Calendar / date | | 🕐 | Clock | Clock / time | | 🔓 | LockOpen | Unlocked | | 🔒 | Lock | Locked | | ☁️ | CloudSync | Cloud sync |

Animated Icons (5)

| Icon | Name | Description | | --- | --- | --- | | 🔄 | LoadingSpinner | Spinning loading indicator | | 🔴 | PulsingDot | Pulsing status dot | | ⬇️ | BouncingArrow | Bouncing arrow | | 🔔 | ShakingBell | Shaking notification bell | | ⚙️ | SpinningGear | Spinning gear / processing |

Using the Icon Pack

import { PxlKitIcon, AnimatedPxlKitIcon, isAnimatedIcon } from '@pxlkit/core';
import { UiPack } from '@pxlkit/ui';

// Render all UI icons
{UiPack.icons.map((icon) =>
  isAnimatedIcon(icon) ? (
    <AnimatedPxlKitIcon key={icon.name} icon={icon} size={32} colorful />
  ) : (
    <PxlKitIcon key={icon.name} icon={icon} size={32} colorful />
  )
)}

Related Packages

| Package | Description | | --- | --- | | @pxlkit/core | Core rendering engine (required) | | @pxlkit/ui-kit | 54 retro React UI components | | @pxlkit/gamification | 51 icons — RPG, achievements, rewards | | @pxlkit/feedback | 33 icons — alerts, status, notifications | | @pxlkit/social | 43 icons — community, emojis, messaging | | @pxlkit/weather | 36 icons — climate, moon, temperature | | @pxlkit/effects | 12 animated VFX icons | | @pxlkit/parallax | 10 multi-layer 3D parallax icons |

Documentation

Browse all icons and try the visual builder at pxlkit.xyz.

License

Pxlkit Asset License — free with attribution, with paid no-attribution terms in COMMERCIAL_TERMS.

Created by Joangel De La Rosa