パーツ番号 07-07-12 ・ CSSのみ

点線枠フレーム付きピクトグラムセット

破線の四角枠でアイコンを囲んだ見本です。編集中や下書き段階の項目を示すUIパーツの装飾に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <svg viewBox="0 0 40 40"><rect x="4" y="4" width="32" height="32" rx="4" fill="none" stroke="#33455a" stroke-width="1.6" stroke-dasharray="3 3"/><path d="M14 26l5-7 4 5 3-4 4 6" fill="none" stroke="#33455a" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/></svg>
          <svg viewBox="0 0 40 40"><rect x="4" y="4" width="32" height="32" rx="4" fill="none" stroke="#33455a" stroke-width="1.6" stroke-dasharray="3 3"/><circle cx="20" cy="17" r="6" fill="none" stroke="#33455a" stroke-width="2"/><path d="M20 23v9M14 32h12" stroke="#33455a" stroke-width="2" stroke-linecap="round"/></svg>
          <svg viewBox="0 0 40 40"><rect x="4" y="4" width="32" height="32" rx="4" fill="none" stroke="#33455a" stroke-width="1.6" stroke-dasharray="3 3"/><path d="M13 27V15h7a4 4 0 0 1 0 8h-7" fill="none" stroke="#33455a" stroke-width="2" stroke-linejoin="round"/></svg>
          <svg viewBox="0 0 40 40"><rect x="4" y="4" width="32" height="32" rx="4" fill="none" stroke="#33455a" stroke-width="1.6" stroke-dasharray="3 3"/><path d="M12 20h16M20 12v16" stroke="#33455a" stroke-width="2" stroke-linecap="round"/></svg>
        </div>

CSS

.d07-07-12 .row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}
        .d07-07-12 svg{width:34px;height:34px}

クラス名 .d07-07-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。