@genart-dev/symbols

A library of 34 curated SVG symbols across 8 categories, designed for use in generative art compositions. Symbols are resolution-independent and optimized for rendering at any scale.

Installation

npm install @genart-dev/symbols

Category	Count	Examples
Nature	6	Tree, flower, leaf, mountain, wave, cloud
Animals	4	Bird, cat, dog, fish
Architecture	4	House, bridge, tower, arch
Transport	3	Bicycle, boat, airplane
Celestial	4	Sun, moon, star, planet
Geometric	5	Spiral, infinity, compass, anchor, arrow
Music	4	Note, treble-clef, guitar, drum
Abstract	4	Eye, hand, heart, lightning

API

Registry

import { getSymbol, searchSymbols, listCategories } from '@genart-dev/symbols';

const symbol = getSymbol('nature/tree');
const results = searchSymbols('geometric');
const categories = listCategories();

Rendering

import { drawSymbol, symbolToSVG, getSymbolNames } from '@genart-dev/components';

// Draw to canvas
drawSymbol(ctx, 'nature/tree', { x: 100, y: 100, size: 64 });

// Get SVG string
const svg = symbolToSVG('nature/tree', { size: 128 });

// List all available symbol names
const names = getSymbolNames();

Custom Symbol Creation

Create custom symbols using SVG path data:

import { createSymbol } from '@genart-dev/symbols';

createSymbol({
  id: 'custom/my-shape',
  name: 'My Shape',
  category: 'custom',
  viewBox: '0 0 24 24',
  paths: [{ d: 'M12 2L22 22H2Z', fill: '#000' }]
});

MCP Integration

5 MCP tools for symbol management:

Tool	Description
`search_symbols`	Search symbols by name or category
`list_symbol_categories`	List all symbol categories
`add_symbol`	Add a symbol to a sketch
`remove_symbol`	Remove a symbol from a sketch
`create_symbol`	Create a custom symbol with SVG path data

@genart-dev/symbols

On this page