Skip to content
IndexDesign corpus
Textures, Backgrounds & AssetsGeneratorToolProprietary / all rights reservedFreeReact

Nucleo SVG Patterns

Free layerable SVG pattern generator with 179 grid, dot, line and tile variants

Aboutnucleoapp.com

A free single-page generator from Nucleo (the 43,450-icon library) that builds seamless SVG background patterns from a fixed catalogue of 179 pattern variants across 31 families — grids, dot grids, checkerboards, crosshairs, diagonal and dashed lines, circle and square tiles. You can stack several patterns in one canvas, reorder them by drag, set per-layer colour and opacity, set a background colour, and copy the result as clean SVG for CSS, HTML or React. It is aimed at developers building the restrained grid-and-dot backdrops common in modern dashboard and SaaS UI.

For an agent

This is the right generator when you want the quiet grid or dot-grid backdrop behind a dashboard or hero — its output is geometric and small, unlike the turbulence-heavy SVGs from fffuel, so it inlines cheaply as a data URI. Use the layering feature to combine a coarse grid with a fine dot grid in one asset instead of stacking two background layers in CSS. Note the licence forbids redistribution and explicitly forbids using the patterns to build a competing generator, so do not vendor the catalogue into your own registry — generate per project and copy the output.

Why it is here. It hits the exact aesthetic that shadcn-era dashboards want (subtle grids, dotted planes) with cleaner, lighter markup than the blob-and-gradient generators, and it costs nothing despite sitting inside a paid product.

Install command, framework, licence and component list.
Helps you build1
Notable for
  • 179 pattern variants, 31 families
  • multi-layer stacking with drag reorder
  • clean production SVG output
  • free tool inside a paid icon product
  • no redistribution allowed
Provenance

Verified 2026-08-15. HTTP 200. https://nucleoapp.com/svg-patterns (WebFetch), https://nucleoapp.com/svg-patterns/ (curl, 179 pattern ids counted in source), https://nucleoapp.com/pricing (WebFetch)

Related resourcesTextures, Backgrounds & Assets