@iconoma-icons/collection

8 built-in styles and 8 color palettes for Iconoma.

Install

npm install @iconoma-icons/core @iconoma-icons/collection

Both packages are required — core is the engine, collection has the styles.

Quick Start

import { createIcon } from '@iconoma-icons/core';
import { pixel, waves, mondrian } from '@iconoma-icons/collection';

// Generate icons — same seed always produces the same icon
const avatar = createIcon(pixel, { seed: '[email protected]' });
const banner = createIcon(waves, { seed: 'project-123', size: 512 });

// Use as HTML
document.getElementById('avatar').innerHTML = avatar.toString();

// Use as image source
document.getElementById('img').src = banner.toDataUri();

Styles

pixel — Blocky

Cellular automaton that generates symmetric creature-like figures on a solid background. Think GitHub-style identicons but more organic.

createIcon(pixel, {
  seed: 'alice',
  styleOptions: {
    seedDensity: 0.45,    // 0.3–0.6    How densely populated the initial grid is
    generations: 3,        // 2–5        Number of Game-of-Life-style iterations
    maxCells: 15,          // 12–20      Maximum cells allowed (rejects too-dense results)
    marginSize: 0.15,      // 0.1–0.2    Margin around figure as proportion of canvas
  }
});

pixelated — Pixel Grid

Symmetric pixel art on a colored background. Patterns can be diagonal stripes, concentric rings, scattered dots, or clusters.

createIcon(pixelated, {
  seed: 'bob',
  styleOptions: {
    blockSize: 8,                   // 4–16         Size of each pixel block
    patternType: 'concentric',      // 'random' | 'diagonal' | 'concentric' | 'scattered' | 'clustered'
    colorVariation: 0.5,            // 0–1          How much colors vary between blocks
    colorsPerIcon: 4,               // 2–5          How many palette colors to use
  }
});

mondrian — Rectangular Composition

Piet Mondrian-inspired layout — colored rectangles separated by thick lines.

createIcon(mondrian, {
  seed: 'charlie',
  styleOptions: {
    divisionCount: 10,     // 4–20       Number of rectangular divisions
    lineThickness: 3,      // 1–8        Black dividing line width in px
    balance: 0.5,          // 0–1        0 = structured grid, 1 = random layout
    colorsPerIcon: 4,      // 2–5        How many palette colors to use
  }
});

gradient — Smooth Gradients

Multi-stop linear gradient fills. Clean and minimal.

createIcon(gradient, {
  seed: 'dana',
  styleOptions: {
    waveComplexity: 3,              // 1–5          Number of color stops in gradient
    direction: 'diagonal',          // 'horizontal' | 'vertical' | 'diagonal' | 'radial' | 'randomize'
    blendSmoothness: 0.7,           // 0–1          How smoothly colors transition
  }
});

mosaic — Voronoi Tiles

Irregular polygon tiles filling the canvas — like broken glass or a stone mosaic.

createIcon(mosaic, {
  seed: 'eve',
  styleOptions: {
    tileCount: 80,            // 20–200      Number of tiles
    tileSizeVariation: 0.5,   // 0–1         0 = uniform tiles, 1 = varied sizes
    gapSize: 1,               // 0–4         Gap between tiles in px
    colorsPerIcon: 4,         // 2–5         How many palette colors to use
  }
});

waves — Layered Waves

Stacked sinusoidal wave bands. Each wave layer uses a different palette color.

createIcon(waves, {
  seed: 'frank',
  styleOptions: {
    waveCount: 4,               // 1–8         Number of wave layers
    amplitude: 0.25,            // 0.1–0.5     Wave height as proportion of canvas
    frequency: 3,               // 1–8         Number of wave cycles across canvas
    direction: 'horizontal',    // 'horizontal' | 'vertical' | 'diagonal' | 'radial' | 'randomize'
  }
});

polycon — Geometric Grid

Grid of triangles and full squares on a colored background. Clean and geometric.

createIcon(polycon, {
  seed: 'grace',
  styleOptions: {
    gridSize: 3,                // 2 | 3 | 4     Grid dimensions (2×2, 3×3, or 4×4)
    emptyProbability: 0.15,     // 0–1            Chance a cell is empty (bg shows through)
    fullSquareProbability: 0.10,// 0–1            Chance cell is a full square vs triangle
    colorsPerIcon: 3,           // 2–5            How many palette colors to use
  }
});

inkblot — Rorschach Blobs

Symmetric organic blob shapes — like a Rorschach test card.

createIcon(inkblot, {
  seed: 'heidi',
  styleOptions: {
    blobCount: 3,             // 1–6           Number of blob shapes
    spread: 0.5,              // 0.2–0.8       How spread out blobs are from center
    symmetry: 'vertical',     // 'none' | 'horizontal' | 'vertical' | 'both'
    centered: false,          // true = centered, false = offset allowed
  }
});

Color Palettes

8 built-in palettes. Each is an array of 5 hex color strings.

import { palettes, paletteNames, DEFAULT_COLORS } from '@iconoma-icons/collection';

// List all palette names
console.log(paletteNames);
// → ['sunset', 'ocean', 'forest', 'neon', 'pastel', 'earth', 'mono', 'candy']

// Use a palette
const icon = createIcon(pixel, {
  seed: 'demo',
  colors: [...palettes.ocean],
});

// DEFAULT_COLORS is the 'neon' palette
console.log(DEFAULT_COLORS);
// → ['#FF006E', '#8338EC', '#3A86FF', '#FFBE0B', '#FB5607']

| Palette | Colors | |---------|--------| | sunset | #FF6B6B #FF8E53 #FFC857 #E85D75 #4A1942 | | ocean | #0077B6 #00B4D8 #90E0EF #023E8A #CAF0F8 | | forest | #2D6A4F #40916C #74C69D #1B4332 #D8F3DC | | neon (default) | #FF006E #8338EC #3A86FF #FFBE0B #FB5607 | | pastel | #FFB5A7 #FCD5CE #F8EDEB #F9DCC4 #FEC89A | | earth | #BC6C25 #DDA15E #606C38 #283618 #FEFAE0 | | mono | #F8F9FA #DEE2E6 #ADB5BD #495057 #212529 | | candy | #F72585 #7209B7 #3A0CA3 #4361EE #4CC9F0 |

Full Exports

// Styles
import { pixel, pixelated, mondrian, gradient, mosaic, waves, polycon, inkblot } from '@iconoma-icons/collection';

// Palettes
import { palettes, paletteNames, DEFAULT_PALETTE, DEFAULT_COLORS } from '@iconoma-icons/collection';

// Types
import type { Palette, PaletteName } from '@iconoma-icons/collection';
import type {
  BlockyParams,        // pixel style options
  PixelParams,         // pixelated style options
  MondrianParams,      // mondrian style options
  GradientParams,      // gradient style options
  MosaicParams,        // mosaic style options
  WavesParams,         // waves style options
  PolyconParams,       // polycon style options
  InkblotParams,       // inkblot style options
  StyleParameters,     // union of all style params
} from '@iconoma-icons/collection';

// Default parameter values
import { DEFAULT_PARAMETERS } from '@iconoma-icons/collection';

License

MIT