@nice2dev/icons-life

Personal life icons (health, finance, home, productivity) for Nice2Dev UI library.

Installation

pnpm add @nice2dev/icons-life

Features

• 🎨 60 Life Icons - Comprehensive set of personal life icons
• 🎭 3 Variants - Filled, outlined, and duotone rendering modes
• ✨ 9 Animations - Built-in SMIL animations (pulse, grow, shake, spin, bounce, fade, flip, slide, glow)
• 📦 Tree-shakeable - Import only what you need
• 🔷 TypeScript - Full type safety with comprehensive types

Icon Categories

Health Icons (15)

Medical, fitness and wellness icons:

HeartIcon, HeartbeatIcon, StethoscopeIcon, PillsIcon, SyringeIcon, BandageIcon, HospitalIcon, AmbulanceIcon, DoctorIcon, DnaIcon, BrainIcon, LungsIcon, DumbbellIcon, YogaIcon, RunningIcon

Finance Icons (15)

Money, banking and investment icons:

WalletIcon, CreditCardIcon, BankNoteIcon, CoinsIcon, PiggyBankIcon, BankIcon, ChartIcon, TrendingUpIcon, TrendingDownIcon, CalculatorIcon, ReceiptIcon, InvoiceIcon, SafeIcon, BitcoinIcon, ExchangeIcon

Home Icons (15)

House, building and interior icons:

HouseIcon, BuildingIcon, DoorIcon, KeyIcon, BedIcon, SofaIcon, LampIcon, KitchenIcon, BathtubIcon, GarageIcon, GardenIcon, FenceIcon, AirConditionerIcon, HeaterIcon, WifiIcon

Productivity Icons (15)

Time management and planning icons:

CalendarIcon, ClockIcon, AlarmIcon, TimerIcon, ChecklistIcon, TargetIcon, TrophyIcon, FlagIcon, RocketIcon, LightbulbIcon, BookmarkIcon, ClipboardIcon, KanbanIcon, GanttIcon, PomodoroIcon

Usage

Basic Usage

import { HeartIcon, WalletIcon, HouseIcon, CalendarIcon } from '@nice2dev/icons-life';

// Health icon with pulse animation
<HeartIcon animation="pulse" />

// Finance icon
<WalletIcon size={32} />

// Home icon
<HouseIcon variant="outlined" />

// Productivity icon
<CalendarIcon size={24} color="#333" />

Icon Variants

import { TrophyIcon } from '@nice2dev/icons-life';

// Filled (default)
<TrophyIcon variant="filled" />

// Outlined
<TrophyIcon variant="outlined" />

// Duotone
<TrophyIcon variant="duotone" accentColor="#fcd34d" />

Animations

import { RocketIcon } from '@nice2dev/icons-life';

<RocketIcon animation="pulse" />   // Pulsing effect
<RocketIcon animation="grow" />    // Size growth
<RocketIcon animation="shake" />   // Shake/wiggle
<RocketIcon animation="spin" />    // 360° rotation
<RocketIcon animation="bounce" />  // Bouncing effect
<RocketIcon animation="fade" />    // Fade in/out
<RocketIcon animation="flip" />    // 3D flip
<RocketIcon animation="slide" />   // Slide motion
<RocketIcon animation="glow" />    // Glowing effect

Grouped Imports

import { healthIcons, financeIcons, homeIcons, productivityIcons } from '@nice2dev/icons-life';

// Access all health icons
const { HeartIcon, DumbbellIcon } = healthIcons;

// Use in icon picker
const allFinanceIcons = Object.values(financeIcons);

Custom Colors

import { HeartIcon } from '@nice2dev/icons-life';

// Override default colors
<HeartIcon color="#333333" accentColor="#ef4444" />;

Props

| Prop | Type | Default | Description | | ------------- | ------------------------------------- | ---------------- | ---------------------------------- | | size | number | 24 | Icon size in pixels | | color | string | 'currentColor' | Primary icon color | | accentColor | string | - | Secondary/accent color for duotone | | variant | 'filled' \| 'outlined' \| 'duotone' | 'filled' | Icon style variant | | animation | LifeIconAnimation | - | Animation type | | className | string | - | Additional CSS class | | style | CSSProperties | - | Inline styles |

TypeScript

import type {
  LifeIconProps,
  LifeIconAnimation,
  HealthIconName,
  FinanceIconName,
  HomeIconName,
  ProductivityIconName,
} from '@nice2dev/icons-life';

// Type-safe icon selection
const iconName: HealthIconName = 'Heart';
const animation: LifeIconAnimation = 'pulse';

Use Cases

Health App Dashboard

<HeartbeatIcon animation="pulse" color="#ef4444" />
<DumbbellIcon size={32} />
<RunningIcon variant="outlined" />

Finance Tracker

<TrendingUpIcon color="#22c55e" />
<TrendingDownIcon color="#ef4444" />
<PiggyBankIcon animation="bounce" />

Smart Home Control

<HouseIcon size={40} />
<LampIcon variant="duotone" accentColor="#fcd34d" />
<WifiIcon animation="pulse" />

Productivity App

<CalendarIcon />
<ChecklistIcon color="#22c55e" />
<PomodoroIcon animation="pulse" accentColor="#ef4444" />

License

MIT © Nice2Dev