Overview

@pxlkit/feedback is a themed icon pack for the Pxlkit ecosystem containing 33 icons (30 static + 3 animated) designed for notifications, alerts, status messages, toasts, and user feedback.

Installation

npm install @pxlkit/core @pxlkit/feedback

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

Quick Start

import { PxlKitIcon, AnimatedPxlKitIcon, isAnimatedIcon } from '@pxlkit/core';
import { CheckCircle, LoadingCircle } from '@pxlkit/feedback';

// Static feedback icon
<PxlKitIcon icon={CheckCircle} size={32} colorful />

// Animated loading indicator
<AnimatedPxlKitIcon icon={LoadingCircle} size={32} colorful />

Icons

Static Icons (30)

| Icon | Name | Description | | --- | --- | --- | | ✅ | CheckCircle | Success / check confirmation | | ❌ | XCircle | Error / close | | ℹ️ | InfoCircle | Information indicator | | ⚠️ | WarningTriangle | Warning alert | | 🛑 | ErrorOctagon | Error / stop | | 🔔 | Bell | Notification bell | | 🔴 | NotificationDot | Unread notification dot | | 💬 | MessageSquare | Message / comment | | 💭 | ChatDots | Chat with typing dots | | 📧 | Mail | Email / mail | | 📤 | Send | Send / submit | | 🔗 | Link | Linked / connected | | 🔓 | Unlink | Unlinked / disconnected | | 🔒 | Lock | Locked / secure | | 🔓 | Unlock | Unlocked / open | | 🛡️ | ShieldCheck | Verified / protected | | 🛡️ | ShieldAlert | Security alert | | 🕐 | Clock | Time / pending | | ✨ | Sparkles | Highlight / new feature | | 📢 | Megaphone | Announcement / broadcast | | ✅✅ | DoubleCheck | Read / confirmed | | 🏅 | Badge | Achievement badge | | 🎀 | Ribbon | Award ribbon | | 🎯 | FeedbackTarget | Feedback target | | 🎯 | TargetHit | Target hit / goal reached | | 🐛 | Bug | Bug report | | 🐛 | BugFixed | Bug fixed / resolved | | ⚠️ | Caution | Caution sign | | 🛡️ | ShieldCross | Blocked / denied | | 🛡️ | ShieldExclamation | Shield warning |

Animated Icons (3)

| Icon | Name | Description | | --- | --- | --- | | 🔄 | LoadingCircle | Spinning loading indicator | | ⏳ | Hourglass | Animated hourglass timer | | 💬 | TypingDots | Typing indicator dots |

Using the Icon Pack

import { PxlKitIcon, AnimatedPxlKitIcon, isAnimatedIcon } from '@pxlkit/core';
import { FeedbackPack } from '@pxlkit/feedback';

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

Toast Notifications

The feedback icons pair perfectly with the PixelToast component from @pxlkit/core:

import { PixelToast } from '@pxlkit/core';
import { CheckCircle, WarningTriangle, ErrorOctagon, InfoCircle } from '@pxlkit/feedback';

// Success toast
<PixelToast visible title="Saved!" message="Your changes have been saved." icon={CheckCircle} colorfulIcon position="bottom-right" duration={3000} />

// Error toast
<PixelToast visible title="Error" message="Something went wrong." icon={ErrorOctagon} colorfulIcon position="bottom-right" />

// Warning toast
<PixelToast visible title="Warning" message="Please check your input." icon={WarningTriangle} colorfulIcon position="top-center" />

Related Packages

| Package | Description | | --- | --- | | @pxlkit/core | Core rendering engine (required) | | @pxlkit/gamification | 51 icons — RPG, achievements, rewards | | @pxlkit/social | 43 icons — community, emojis, messaging | | @pxlkit/weather | 36 icons — climate, moon, temperature | | @pxlkit/ui | 41 icons — interface controls, navigation | | @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