@designtools/cascade

Hand-crafted icons for 29 CSS properties and their values. Made for design tools that speak code.

React components and raw SVGs. Every icon fits a 15x15 pixel grid with crisp edges at 1x resolution.

Brought to you by flett.cc

Install

npm install @designtools/cascade

Usage

import { DisplayFlex, PaddingTop, FlexDirectionRow } from "@designtools/cascade";

function App() {
  return (
    <div>
      <DisplayFlex />
      <PaddingTop />
      <FlexDirectionRow />
    </div>
  );
}

Props

Every icon component accepts the following props along with all standard SVG attributes (SVGAttributes<SVGSVGElement>):

<DisplayFlex color="#6366f1" />
<DisplayFlex solid />
<DisplayFlex width={30} height={30} />

Any standard SVG attribute (e.g. className, style, aria-hidden) can also be passed directly.

Accessibility

Icons ship without aria-hidden so consumers can decide per use case.

Decorative (most common) — add aria-hidden="true":

<label>
  <DisplayFlex aria-hidden="true" />
  Flex
</label>

Standalone/meaningful — use aria-label:

<button aria-label="Set display to flex">
  <DisplayFlex aria-hidden="true" />
</button>

Raw SVGs

Static .svg files are included in the svg/ directory for use outside React.

Metadata

The package exports a metadata array mapping CSS properties/values to icon names:

import { metadata } from "@designtools/cascade";

// Each entry: { property: string, value: string | null, icon: string }
metadata.forEach((entry) => {
  console.log(`${entry.property}: ${entry.value} → ${entry.icon}`);
});

Use this to build icon pickers, documentation, or editor integrations programmatically.

Categories

Compatibility

The package ships both ESM (.mjs) and CJS (.cjs) bundles with full TypeScript declarations. It works out of the box with any modern bundler or runtime:

The exports map in package.json ensures the correct format is resolved automatically. The package is marked sideEffects: false, so importing a single icon will not bundle the rest.

Requires React 18+ as a peer dependency.

Licence

MIT. Glyph paths derived from Inter (OFL-1.1).