N-Icons

300 expressive animated SVG icons in the local source catalog. React / Next.js and native Astro components, with CSS animations, unique SVG IDs and reduced-motion support. No animation runtime, no shadows. MIT license.

Installation

npm install @pir-lr/n-icons

Import the styles once in your application layout:

import '@pir-lr/n-icons/styles.css';

React / Next.js

import { Rocket, Folder, Download } from '@pir-lr/n-icons/react';

export default function Page() {
  return <>
    <Rocket size={48} label="Launch" />
    <Folder size={32} />
    <Download size={24} animate="always" speed={1.25} />
  </>;
}

The React entry is a Client Component boundary to generate SSR-stable IDs with React useId. Import it from either a server or client page in Next.js; the page itself does not need use client. React is a peer dependency, not bundled. SVG is rendered in the server preview; animation runs in CSS. Decorative icons are hidden from assistive technology; label makes the wrapper an accessible image.

Forwarded refs and HTML attributes apply to the wrapping span. Do not put interactive content inside an icon; put the icon inside a button or link.

Astro

---
import { Rocket, Folder } from '@pir-lr/n-icons/astro';
import '@pir-lr/n-icons/styles.css';
---
<Rocket size={48} label="Décoller" />
<Folder size={32} class="my-icon" />

Native Astro components require no React integration and no client:* directive. Each SVG instance receives its own IDs during rendering.

Options

| Prop | Default | Meaning | | --- | --- | --- | | size | 48 | Pixels as a number, or a CSS length string. | | animate | hover | hover, always, or none. always activates the original choreography; single-shot gestures do not become endless loops. | | speed | 1 | Positive multiplier: 2 runs twice as fast. | | label | absent | Accessible description. Without it the icon is decorative. | | className / class | absent | Extra wrapper class for React / Astro. |

All modes respect prefers-reduced-motion. The object's existing palette is preserved. There is no global color override.

To animate on the whole button's hover or keyboard focus:

<button className="ni-animate-host">
  <Rocket size={24} /> Launch
</button>

Smaller imports

Named component exports support tree shaking. To explicitly import one component:

import Rocket from '@pir-lr/n-icons/react/Rocket';
// Astro: import Rocket from '@pir-lr/n-icons/astro/Rocket';

The shared stylesheet includes all animations. For a small subset, replace it with:

import '@pir-lr/n-icons/styles/base.css';
import '@pir-lr/n-icons/styles/rocket.css';
import '@pir-lr/n-icons/styles/folder.css';

CSS filenames use source filenames. For example Heart uses favorite.css, and Bell uses notification.css. The root export's icons catalogue exposes each key, name, componentName and SVG definition; prefer component imports when you only need a few icons.

Versions

1.1.0 — Level 2 complete: 300 validated icons, including 150 additions since 1.0.0.

Release status (2026-11-02): 300 validated icons, including all 150 Level 2 additions. All ten Level 2 families are complete, with no WIP remaining. The local package 1.1.0 has been regenerated and is prepared for npm publication. New icons use a minor release, fixes use a patch release, and incompatible API changes use a major release. Updates never alter an already-installed version. Use your package manager to upgrade and review the changelog.