Mark

Pixel-perfect 20×20 icons for design, creative, and CSS layout tools.

Each icon uses crisp 1px details for clear rendering in toolbars, inspectors, and canvas interfaces. Available as typed React components and raw SVGs.

Install

npm install @weavo-design/mark

React 18 or newer is required.

Use

import { FontSize, Frame } from '@weavo-design/mark'

export function Toolbar() {
  return (
    <div>
      <FontSize aria-label="Font size" />
      <Frame color="#2563eb" aria-label="Frame" />
    </div>
  )
}

Every icon accepts standard SVG props plus an optional color prop. The default color is currentColor, so icons inherit the surrounding text color.

For a direct per-icon import, use the icon file name as a subpath:

import { FontSize } from '@weavo-design/mark/icons/font-size'

Raw SVG files are also published for bundlers that support SVG imports:

import fontSizeUrl from '@weavo-design/mark/svg/font-size.svg'

Development

Regenerate the React components after changing files in svg/:

npm run generate:icons

Build the publishable ESM and TypeScript declarations:

npm run build

License

MIT