Overview

@pxlkit/gamification is a themed icon pack for the Pxlkit ecosystem containing 51 icons (41 static + 10 animated) designed for game mechanics, achievements, rewards, and RPG elements.

Installation

npm install @pxlkit/core @pxlkit/gamification

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

Quick Start

import { PxlKitIcon, AnimatedPxlKitIcon } from '@pxlkit/core';
import { Trophy, FireSword } from '@pxlkit/gamification';

// Static gamification icon
<PxlKitIcon icon={Trophy} size={32} colorful />

// Animated fire sword
<AnimatedPxlKitIcon icon={FireSword} size={48} colorful />

Icons

Static Icons (41)

| Icon | Name | Description | | --- | --- | --- | | 🏆 | Trophy | Achievement trophy | | ⭐ | Star | Star rating / favorite | | ⚔️ | Sword | Weapon / attack | | 🛡️ | Shield | Defense / protection | | ❤️ | Heart | Health / life | | 🪙 | Coin | Currency / reward | | 👑 | Crown | Royalty / top rank | | ⚡ | Lightning | Power / speed | | 💎 | Gem | Rare item / premium | | 🚩 | Flag | Checkpoint / goal | | 🧪 | Potion | Consumable item | | 🔑 | Key | Unlock / access | | 📦 | Chest | Loot chest | | 🎖️ | Medal | Achievement medal | | 🔥 | Fire | Hot streak / damage | | 🏹 | Arrow | Projectile / direction | | 📜 | Scroll | Quest / spell | | 💀 | Skull | Danger / death | | 🎯 | Target | Target / aim | | 💣 | Bomb | Explosive / item | | 🆙 | LevelUp | Level up indicator | | 🛡️ | Armor | Body armor | | ⛑️ | Helmet | Head protection | | 👢 | Boots | Speed / footwear | | 🏹 | Bow | Ranged weapon | | 🪄 | MagicWand | Magic weapon | | 🔮 | Staff | Magic staff | | 🪓 | Axe | Melee weapon | | 🗡️ | Dagger | Quick weapon | | 📖 | SpellBook | Spell collection | | 💍 | Ring | Accessory / buff | | 📿 | Amulet | Magic accessory | | 📦 | LootChest | Loot / treasure | | 🗺️ | QuestMap | Quest navigation | | 🧭 | QuestCompass | Quest direction | | ❤️‍🩹 | HealthPotion | Health restore | | 🔵 | ManaPotion | Mana restore | | ☠️ | PoisonVial | Poison item | | 🧪 | Elixir | Powerful consumable | | 🎲 | Dice | Random / chance | | 📊 | XpBar | Experience progress |

Animated Icons (10)

| Icon | Name | Description | | --- | --- | --- | | 🔥⚔️ | FireSword | Sword with animated flames | | ✨⭐ | SparkleStar | Sparkling star | | 🪙 | CoinSpin | Spinning coin | | ⚽ | BouncingBall | Bouncing ball | | ⚔️✨ | GlowingSword | Glowing enchanted sword | | 💎 | FloatingGem | Floating levitating gem | | ❤️ | HeartPulse | Pulsing heart beat | | 🪙 | CoinFlip | Flipping coin | | 💀 | FloatingSkull | Floating skull | | 🃏 | CardDraw | Card draw animation |

Using the Icon Pack

import { PxlKitIcon, AnimatedPxlKitIcon, isAnimatedIcon } from '@pxlkit/core';
import { GamificationPack } from '@pxlkit/gamification';

// Render all gamification icons
{GamificationPack.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/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/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