SVG Icon Maker

Draw custom SVG icons on a 24×24 grid — no software needed. Export clean SVG code instantly.

Preset Icons

<div class="panel" style="margin-bottom:12px">
  <h3>Draw Tool</h3>
  <div style="display:flex;flex-direction:column;gap:6px" id="tool-buttons"></div>

  <hr class="section-sep">

  <label>Fill Color</label>
  <input type="color" id="fill-color" value="#4f46e5">
  <label style="margin-top:6px">
    <input type="checkbox" id="no-fill" style="width:auto;margin-right:4px"> No Fill
  </label>

  <label>Stroke Color</label>
  <input type="color" id="stroke-color" value="#4f46e5">

  <label>Stroke Width</label>
  <input type="range" id="stroke-width" min="0" max="4" step="0.5" value="1.5">
  <div style="font-size:.78rem;color:#6b7280;text-align:right" id="stroke-val">1.5</div>

  <label>Fill Opacity</label>
  <input type="range" id="fill-opacity" min="0" max="1" step="0.05" value="1">
  <div style="font-size:.78rem;color:#6b7280;text-align:right" id="opacity-val">1.0</div>
</div>

<div class="panel">
  <h3>Shapes (<span id="shape-count">0</span>)</h3>
  <div class="shape-list" id="shape-list"></div>
  <div style="margin-top:8px;display:flex;gap:6px">
    <button class="btn btn-danger btn-sm" id="del-selected-btn">Delete</button>
    <button class="btn btn-secondary btn-sm" id="clear-btn">Clear All</button>
  </div>
</div>
Preview at: 16 32 64
Click & drag to draw. Click a shape to select it.

SVG Code Output

<!-- Draw shapes to generate SVG -->
Copied to clipboard!
  <hr class="section-sep">
  <h3 style="margin-top:0">Export Size</h3>
  <label>Custom viewBox size</label>
  <select id="viewbox-size">
    <option value="24">24×24 (standard)</option>
    <option value="16">16×16</option>
    <option value="32">32×32</option>
    <option value="48">48×48</option>
    <option value="64">64×64</option>
  </select>

  <hr class="section-sep">
  <h3 style="margin-top:0">Optimize</h3>
  <label class="grid-toggle" style="margin-top:4px">
    <input type="checkbox" id="round-coords" checked> Round coordinates (2dp)
  </label>
</div>