CSS Property SVG Icon Components For React – Cascade

Description:

Cascade is a React icon library that renders CSS property and value glyphs as 15 pixel SVG components.

It includes 97 CSS property icons for display, flexbox, spacing, typography, overflow, borders, and other common style controls.

Features

• Includes 97 icons for CSS properties and CSS values.
• Exports each icon as a React SVG component.
• Includes raw SVG files for non React usage.
• Uses a 15 pixel grid for crisp 1x rendering.
• Inherits text color through the current color model.
• Supports full opacity rendering for duotone icons.
• Exports metadata for icon pickers and editor panels.
• Ships ESM, CJS, and TypeScript declaration files.
• Supports tree shaking through package metadata.

Use Cases

• CSS visual editors gain compact icons for layout controls.
• Design tool panels gain consistent property glyphs.
• Documentation pages gain visual labels for CSS examples.
• Component libraries gain small SVG icons for style settings.

How To Use It

Install The React CSS Property Icon Package

npm install @designtools/cascade

The package requires React 18 or newer. It ships TypeScript declarations, so a TypeScript React app can import icon components directly.

Import The Icons You Need

import {
  DisplayFlex,
  PaddingTop,
  FlexDirectionRow,
} from "@designtools/cascade";
export function CssToolbar() {
  return (
    <div className="css-toolbar">
      {/* Renders the display flex icon. */}
      <DisplayFlex aria-hidden="true" />
      {/* Renders the padding top icon. */}
      <PaddingTop aria-hidden="true" />
      {/* Renders the flex direction row icon. */}
      <FlexDirectionRow aria-hidden="true" />
    </div>
  );
}

Import icons by name. The package metadata marks the package as side effect free, so modern bundlers can keep unused icons out of the final bundle.

Use Cascade Icons In A CSS Control Button

import { DisplayGrid } from "@designtools/cascade";
type LayoutButtonProps = {
  selected: boolean;
  onSelect: () => void;
};
export function GridLayoutButton({ selected, onSelect }: LayoutButtonProps) {
  return (
    <button
      type="button"
      aria-pressed={selected}
      onClick={onSelect}
      className={selected ? "control is-selected" : "control"}
    >
      {/* The icon stays decorative because the button text names the action. */}
      <DisplayGrid aria-hidden="true" />
      <span>Grid</span>
    </button>
  );
}

Use aria-hidden="true" when the surrounding text or button label explains the action. This keeps screen reader output clean.

Customize Icon Color And Size

import { DisplayFlex } from "@designtools/cascade";
export function IconSamples() {
  return (
    <div className="icon-samples">
      {/* Uses a custom icon color. */}
      <DisplayFlex color="#4f46e5" aria-hidden="true" />
      {/* Renders the duotone icon at full opacity. */}
      <DisplayFlex solid aria-hidden="true" />
      {/* Uses a 30 by 30 icon size. Multiples of 15 keep the grid crisp. */}
      <DisplayFlex width={30} height={30} aria-hidden="true" />
    </div>
  );
}

Use multiples of 15 for the best pixel alignment. The default size already matches the internal icon grid.

Use Standard SVG Attributes

import { MarginTop } from "@designtools/cascade";
export function SpacingControlIcon() {
  return (
    <MarginTop
      // Adds a CSS class for project level styling.
      className="property-icon"
      // Keeps the icon out of the accessibility tree.
      aria-hidden="true"
      // Applies SVG inline styles when needed.
      style={{ verticalAlign: "middle" }}
    />
  );
}

Each icon accepts standard SVG attributes for the root <svg> element. This includes className, style, role, aria-hidden, and other SVGAttributes<SVGSVGElement> values.

Available Component Props

• color (string): Sets the icon color. The default value is currentColor.
• solid (boolean): Renders duotone icons at full opacity. The default value is false. It has no effect on non duotone icons.
• width (number | string): Sets the icon width. The default value is 15. Use multiples of 15 for pixel perfect rendering.
• height (number | string): Sets the icon height. The default value is 15. Use multiples of 15 for pixel perfect rendering.
• Standard SVG attributes (SVGAttributes<SVGSVGElement>): Pass normal SVG props such as className, style, aria-hidden, and aria-label.

Accessibility Patterns

Decorative icons work best with aria-hidden="true".

import { DisplayFlex } from "@designtools/cascade";
export function FlexLabel() {
  return (
    <label>
      {/* Decorative icon. The text label already names the CSS value. */}
      <DisplayFlex aria-hidden="true" />
      Flex layout
    </label>
  );
}

Standalone icon buttons need an accessible label on the control.

import { DisplayFlex } from "@designtools/cascade";
export function FlexButton() {
  return (
    <button
      type="button"
      // Names the icon only control for assistive technology.
      aria-label="Set display property to flex"
    >
      {/* Decorative inside the labeled button. */}
      <DisplayFlex aria-hidden="true" />
    </button>
  );
}

Metadata Export

Cascade exports a metadata array. Each item maps a CSS property and optional value to an icon name.

import { metadata } from "@designtools/cascade";
export function logCascadeMetadata() {
  metadata.forEach((entry) => {
    // Each entry contains property, value, and icon fields.
    console.log(`${entry.property}: ${entry.value ?? "base"} => ${entry.icon}`);
  });
}

The metadata shape is:

type CascadeIconMetadata = {
  property: string;
  value: string | null;
  icon: string;
};

A CSS editor can use this data to create a searchable icon picker.

import { metadata } from "@designtools/cascade";
export function CssIconList() {
  return (
    <ul>
      {metadata.map((entry) => (
        <li key={`${entry.property}-${entry.value ?? "base"}`}>
          {/* Shows the CSS property and value linked to each icon name. */}
          <code>{entry.property}</code>
          <span>{entry.value ?? "property"}</span>
          <strong>{entry.icon}</strong>
        </li>
      ))}
    </ul>
  );
}

Available Icons

• Display: 8 icons.
• Flex direction: 4 icons.
• Flex wrap: 3 icons.
• Flex grow and shrink: 2 icons.
• Justify content: 6 icons.
• Align items: 7 icons.
• Align self: 8 icons.
• Align content: 9 icons.
• Position: 5 icons.
• Padding: 5 icons.
• Margin: 5 icons.
• Gap: 2 icons.
• Size: 2 icons.
• Axis: 2 icons.
• Border radius: 5 icons.
• Border style and width: 2 icons.
• Overflow: 4 icons.
• Text align: 4 icons.
• Text decoration: 3 icons.
• Text transform: 3 icons.
• Typography: 5 icons.
• Opacity: 1 icon.
• Box shadow: 1 icon.

AI Coding Assistant Prompt

Add Cascade to my React project. Use @designtools/cascade. Build a CSS property toolbar with display, flex direction, spacing, and typography icons. Use documented icon components, color, solid, width, height, standard SVG attributes, and metadata. Avoid undocumented props or APIs.

FAQs

Q: Can I use Cascade icons in TypeScript projects?
A: Yes. The package ships full TypeScript declarations through dist/index.d.ts.

Q: Why does my icon look blurry after resizing?
A: Use sizes that are multiples of 15, such as 15, 30, or 45. Cascade icons use a 15 pixel grid.

Q: Can I use Cascade outside React?
A: Yes. Static SVG files are included in the svg/ directory.

Q: How should I handle accessibility for icon only buttons?
A: Put the label on the button with aria-label. Set the icon itself to aria-hidden="true" inside that button.