@nice2dev/icons-education

Animated education icons for learning applications. Part of the Nice2Dev UI component library.

Features

• 🎭 60 Unique Icons — School, Science, Math, and Arts categories
• ✨ SMIL Animations — 9 built-in animation types (pulse, grow, shake, spin, bounce, fade, flip, slide, glow)
• 🎨 3 Variants — Filled, outlined, and duotone styles
• ⚡ Tree-shakeable — Import only what you need
• 📦 Lazy Loading — Icon collections support dynamic imports
• 🔧 TypeScript — Full type safety with strict typing
• ♿ Accessible — ARIA attributes and keyboard support

Installation

# npm
npm install @nice2dev/icons-education

# pnpm
pnpm add @nice2dev/icons-education

# yarn
yarn add @nice2dev/icons-education

Quick Start

import { GraduationCapIcon, AtomIcon, CalculatorIcon, PaletteIcon } from '@nice2dev/icons-education';

function App() {
  return (
    <div>
      {/* Static icon */}
      <GraduationCapIcon size={24} />

      {/* Animated icon */}
      <AtomIcon animation="spin" size={32} />

      {/* Custom styling */}
      <PaletteIcon variant="duotone" color="#3b82f6" accentColor="#93c5fd" animation="grow" />
    </div>
  );
}

Icon Categories

School (15 icons)

| Icon | Name | Description | | ---- | ------------------- | -------------------------- | | 🎓 | GraduationCapIcon | Graduation cap/mortarboard | | 📕 | BookIcon | Closed book | | 📖 | BookOpenIcon | Open book | | 📚 | LibraryIcon | Library/bookshelf | | 🎒 | BackpackIcon | School backpack | | ✏️ | PencilIcon | Writing pencil | | 🖊️ | PenFancyIcon | Fancy pen | | 📏 | RulerIcon | Measuring ruler | | 🧹 | EraserIcon | Eraser | | ✂️ | ScissorsIcon | Scissors | | 📓 | NotebookIcon | Notebook | | 📝 | HomeworkIcon | Homework/assignment | | 📜 | DiplomaIcon | Diploma | | 🏅 | CertificateIcon | Certificate | | 🔔 | BellIcon | School bell |

Science (15 icons)

| Icon | Name | Description | | ---- | ---------------- | ------------------ | | ⚛️ | AtomIcon | Atom structure | | 🔬 | MicroscopeIcon | Microscope | | 🔭 | TelescopeIcon | Telescope | | 🧪 | FlaskIcon | Lab flask | | 🧫 | BeakerIcon | Beaker | | 🧬 | DNAIcon | DNA helix | | ⚗️ | MoleculeIcon | Molecule | | 🧲 | MagnetIcon | Magnet | | 🪐 | PlanetIcon | Planet with ring | | 🚀 | RocketIcon | Rocket | | 🔬 | LabIcon | Laboratory | | 🧫 | PetriDishIcon | Petri dish | | ⚗️ | ChemicalIcon | Chemical/test tube | | ☢️ | RadiationIcon | Radiation symbol | | 🦠 | BiologyIcon | Biology/cell |

Math (15 icons)

| Icon | Name | Description | | ---- | ---------------- | ----------------- | | 🧮 | CalculatorIcon | Calculator | | π | PiIcon | Pi symbol | | Σ | SigmaIcon | Sigma/summation | | ∞ | InfinityIcon | Infinity symbol | | ƒ | FunctionIcon | Function notation | | 📈 | GraphIcon | Graph/chart | | △ | GeometryIcon | Geometry shapes | | ⭕ | CompassIcon | Drawing compass | | 📐 | ProtractorIcon | Protractor | | 🧮 | AbacusIcon | Abacus | | x² | FormulaIcon | Math formula | | % | PercentIcon | Percent symbol | | ÷ | DivisionIcon | Division symbol | | ± | PlusMinusIcon | Plus-minus symbol | | = | EqualsIcon | Equals sign |

Arts (15 icons)

| Icon | Name | Description | | ---- | --------------- | -------------- | | 🎨 | PaletteIcon | Artist palette | | 🖌️ | BrushIcon | Paint brush | | 🖼️ | EaselIcon | Art easel | | 🖼️ | CanvasIcon | Canvas | | 🎵 | MusicNoteIcon | Music note | | 🎹 | PianoIcon | Piano keys | | 🎸 | GuitarIcon | Guitar | | 🎭 | DramaIcon | Drama masks | | 🎭 | TheaterIcon | Theater stage | | 🗿 | SculptureIcon | Sculpture | | 📷 | CameraIcon | Camera | | 🎬 | FilmIcon | Film reel | | 💃 | DanceIcon | Dance figure | | ✂️ | CraftsIcon | Arts & crafts | | 🏺 | PotteryIcon | Pottery |

Animation Types

import { AtomIcon } from '@nice2dev/icons-education';

// Available animations
<AtomIcon animation="pulse" />     // Pulsing opacity
<AtomIcon animation="grow" />      // Scale up/down
<AtomIcon animation="shake" />     // Horizontal shake
<AtomIcon animation="spin" />      // 360° rotation
<AtomIcon animation="bounce" />    // Vertical bounce
<AtomIcon animation="fade" />      // Fade in/out
<AtomIcon animation="flip" />      // Y-axis flip
<AtomIcon animation="slide" />     // Horizontal slide
<AtomIcon animation="glow" />      // Drop shadow glow

Animation Duration

<AtomIcon animation="spin" animationDuration="fast" />    // 0.5s
<AtomIcon animation="spin" animationDuration="normal" />  // 1s (default)
<AtomIcon animation="spin" animationDuration="slow" />    // 2s

Icon Variants

import { GraduationCapIcon } from '@nice2dev/icons-education';

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

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

// Duotone (two-color)
<GraduationCapIcon
  variant="duotone"
  color="#3b82f6"
  accentColor="#93c5fd"
/>

Props Reference

| Prop | Type | Default | Description | | ------------------- | ------------------------------------- | ---------------- | ------------------------------------------ | | size | number \| string | 24 | Icon size in pixels or CSS string | | color | string | 'currentColor' | Primary icon color | | accentColor | string | color | Secondary/accent color for duotone | | variant | 'filled' \| 'outlined' \| 'duotone' | 'filled' | Icon style variant | | animation | EducationIconAnimation | 'none' | Animation type | | animationDuration | 'slow' \| 'normal' \| 'fast' | 'normal' | Animation speed | | animate | boolean | true | Whether animation should play | | strokeWidth | number | 2 | Stroke width for outlined variant | | className | string | undefined | Additional CSS class | | title | string | undefined | Accessible title (also enables aria-label) | | style | CSSProperties | undefined | Inline styles |

Dynamic Imports

For code-splitting, use the icon collections:

import { SchoolIcons } from '@nice2dev/icons-education';

// Dynamically load an icon
const loadGraduationCapIcon = async () => {
  const GraduationCapIcon = await SchoolIcons.GraduationCap();
  return GraduationCapIcon;
};

TypeScript

All icons are fully typed:

import type {
  EducationIconProps,
  EducationIconAnimation,
  SchoolIconName,
  ScienceIconName,
  MathIconName,
  ArtsIconName,
} from '@nice2dev/icons-education';

// Type-safe icon name unions
type AllIconNames = SchoolIconName | ScienceIconName | MathIconName | ArtsIconName;

License

MIT © Nice2Dev