neicon-react

Neubrutalism-inspired icons — bold offset frames, hard edges, high contrast — as tree-shakeable React components. Every icon ships in two variants — a colored default and a black & white version — driven by a single monochrome prop. For vanilla JS / raw SVG data, see neicon.

Install

npm i neicon-react

Requires react >= 18 as a peer dependency.

Usage

Import only the icons you use — the rest are tree-shaken away.

import { Check, DownArrow } from 'neicon-react'

export function Example() {
  return (
    <>
      <Check />                      {/* colored, 24px */}
      <Check size={32} />            {/* custom size */}
      <Check monochrome />           {/* black & white variant */}
      <DownArrow className="nav" onClick={...} />
    </>
  )
}

Props

Every icon accepts all native <svg> props, plus:

| Prop | Type | Default | Description | | ------------ | ------------------ | ------- | -------------------------------------------- | | size | number \| string | 24 | Width & height. A number is pixels. | | monochrome | boolean | false | Render the b&w variant instead of colored. |

Dynamic use / building tooling

For cases where the icon is chosen at runtime (search UIs, CMS-driven content), import the registry and metadata from the /all subpath. Note this pulls the whole set into your bundle, so prefer named imports for app code.

import { iconComponents, icons, categories } from 'neicon-react/all'

const Icon = iconComponents['down-arrow']
<Icon size={40} monochrome />

// `icons` is an array of { name, component, category, description, variants }
// `categories` is the ordered list of category keys

How it's built

Components are generated from the repo's single source of truth, data/icon-data.json, by scripts/generate.mjs. To regenerate after the data changes:

bun run gen:icons   # from the repo root