Overview

@pxlkit/effects is a themed icon pack for the Pxlkit ecosystem containing 12 animated visual effect icons. Each icon is a multi-frame animated SVG rendered at pixel-perfect quality.

This pack focuses on VFX and particle-style effects — explosions, radar pings, flames, shockwaves, and more.

Installation

npm install @pxlkit/core @pxlkit/effects

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

Quick Start

import { AnimatedPxlKitIcon } from '@pxlkit/core';
import { ExplosionBurst } from '@pxlkit/effects';

// Auto-playing animated effect
<AnimatedPxlKitIcon icon={ExplosionBurst} size={48} colorful />

// Play on hover only
<AnimatedPxlKitIcon icon={ExplosionBurst} size={48} colorful trigger="hover" />

Icons

All icons in this pack are animated with multi-frame playback:

| Icon | Name | Description | | --- | --- | --- | | 💥 | ExplosionBurst | Animated explosion burst effect | | 📡 | RadarPing | Radar ping / sonar signal | | 🔥 | Flame | Flickering pixel flame | | ✨ | GlowPulse | Pulsing glow effect | | 🌧️ | PixelRain | Falling pixel rain particles | | 🌊 | Shockwave | Expanding shockwave ring | | ⚡ | SparkBurst | Sparkling burst of particles | | 📺 | ScanSweep | Scanning sweep line effect | | ⭐ | Twinkle | Twinkling star sparkle | | 🫧 | Ripple | Expanding ripple rings | | 💡 | NeonStrobe | Flashing neon strobe light | | 🌀 | PortalSpin | Spinning portal vortex |

Using the Icon Pack

import { AnimatedPxlKitIcon } from '@pxlkit/core';
import { EffectsPack } from '@pxlkit/effects';

// Browse all effects
{EffectsPack.icons.map((icon) => (
  <AnimatedPxlKitIcon key={icon.name} icon={icon} size={32} colorful />
))}

Animation Controls

// Loop continuously (default)
<AnimatedPxlKitIcon icon={Flame} size={48} colorful />

// Play once
<AnimatedPxlKitIcon icon={Flame} size={48} colorful trigger="once" />

// Play on hover
<AnimatedPxlKitIcon icon={Flame} size={48} colorful trigger="hover" />

// Custom speed (0.5 = half speed)
<AnimatedPxlKitIcon icon={Flame} size={48} colorful speed={0.5} />

Related Packages

| Package | Description | | --- | --- | | @pxlkit/core | Core rendering engine (required) | | @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/ui | 41 icons — interface controls, navigation | | @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