SVGアイコン作成ツール

24×24グリッドでSVGアイコンをブラウザ上で自由に描画。SVGコードをすぐにコピー・ダウンロードできます。

プリセットアイコン

<div class="panel" style="margin-bottom:12px">
  <h3>描画ツール</h3>
  <div style="display:flex;flex-direction:column;gap:6px" id="tool-buttons"></div>

  <hr class="section-sep">

  <label>塗りつぶし色</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"> 塗りなし
  </label>

  <label>線の色（ストローク）</label>
  <input type="color" id="stroke-color" value="#4f46e5">

  <label>線の太さ</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>塗りつぶし不透明度</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>シェイプ一覧（<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">削除</button>
    <button class="btn btn-secondary btn-sm" id="clear-btn">全消去</button>
  </div>
</div>
プレビュー: 16px 32px 64px
クリック＆ドラッグで描画。シェイプをクリックで選択。

SVGコード出力

<!-- キャンバスに描画するとSVGが生成されます -->
クリップボードにコピーしました！
  <hr class="section-sep">
  <h3 style="margin-top:0">エクスポートサイズ</h3>
  <label>viewBoxサイズ</label>
  <select id="viewbox-size">
    <option value="24">24×24（標準）</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">最適化</h3>
  <label class="grid-toggle" style="margin-top:4px">
    <input type="checkbox" id="round-coords" checked> 座標を丸める（小数点2桁）
  </label>
</div>

デザイン業務を効率化 → freee会計でクリエイティブ業務に集中

クリエイティブ業務の請求・経費管理もラクに デザインやコーディングの案件管理・請求書発行・確定申告まで、freee会計で一元管理できます。
freee会計を無料で試す →

関連ツール

Favicon Generator → Favicon Generatorツール Image Color Picker → Image Color Pickerツール 画像圧縮 → 画像圧縮ツール