# Dot Logo Designer

Render text onto a square dot grid and export a production-ready SVG.

Quick Start

Apply tuned defaults for crisp icon-like dot logos, then refine as needed.

Text + Font
Text
Font family
Available fonts

Detecting common local fonts...

Font weight (boldness)
Font style
Letter spacing (px)
Font scale (% of max fit)
Text offset X (px)
Text offset Y (px)
Grid + Shape
Canvas width (px)
Canvas height (px)
Dot spacing (px)
Dot radius (px)
Edge padding (safe margin, px)

Reserved margin around the canvas where no dots are placed. Lower padding lets the logo fill more space.

Highlight threshold (alpha)
Color
Background
Lowlight dots
Highlight dots
Output
Logo variant

For app icons/themes, mono `currentColor` is recommended so host UI controls the color.

Preview backdrop
Backdrop color
SVG mode

Compact mode reduces repeated markup and usually cuts file size.

Target render sizes (px, comma-separated)

Common UI icon sizes: 16, 20, 24, 32, 48, 64. “Tune dots” uses the smallest target size as the limiting case and aims for a cleaner dot-matrix render.

Show 16x16 guide overlay in main preview

Guide is preview-only and is not included in copied/downloaded SVG output.

SVG source