Layout Icons

A focused, customisable set of SVG icon components for representing layout and container structures in user interfaces.

Design Principles

This library is intentionally narrow in scope.

• Icons represent layout structure, not visual decoration
• All icons share a consistent grid, sizing, and corner-radius model
• Components are designed to scale, style, and customise
• Accessibility is supported via optional title props

See the Changelog for details on versions and updates.

Installation

npm install @custmaz/layout-icons

Maintainer

This library is currently maintained solely by the author. External contributions are not accepted at this time to ensure consistency and quality.

Basic Usage

Import and use the icons in your React components:

import { List, HamburgerMenu, Card } from "@custmaz/layout-icons";

export function Example() {
  return (
    <div>
      <List />
      <HamburgerMenu />
      <Card />
    </div>
  );
}

Icons inherit their colour from their parent element.

Customisation

All icons share a consistent set of props:

<Grid
  size={32}           // Width & height
  strokeWidth={2}     // Outline thickness
  radius={4}          // Corner rounding
  variant="outline"   // "outline" or "filled"
  title="Grid layout" // Accessibility label
/>

These props allow you to adjust scale, stroke weight, corner rounding, and visual style without changing the icon structure.

Props Reference

| Prop | Type | Default | Description | |-------------|-----------------------------------|-----------|-----------------------------------------| | size | number | string | 24 | Width and height of the icon | | strokeWidth | number | 0.8 | Stroke thickness (outline only) | | radius | number | 1 | Corner radius | | variant | "outline" | "filled" | "outline" | Visual style | | title | string | — | Enables accessibility |

Note: Defaults are for version 0.1.0

Theming

Icons are plain SVG elements and can be styled using standard CSS techniques.

<div style={{ color: "#1f2937" }}>
  <Grid />
  <Masonry />
</div>

Works with:

• CSS/SCSS
• CSS Modules
• Tailwind
• styled-components
• inline styles

Accessibility

Icons are decorative by default.

To provide an accessible label, pass a title prop:

<Grid title="Grid layout" />

This ensures that the icon is announced properly by screen readers.

Available Icons

Layout:

• Grid
• Grid3x3
• Masonry
• List
• Tall
• Landscape
• Split
• Card

Menus:

• HamburgerMenu
• Kebab (three horizontal dots)
• Meatballs (three vertical dots)

Issues

Bug reports and feature requests can be filed on GitHub:

https://github.com/custmaz/layout-icons/issues

License

MIT