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

角丸四角背景付きアイコンセット

角丸の四角形背景にアイコンを配置した見本です。カード型のメニューや機能一覧の装飾に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <span class="sq"><svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/><path d="M8 12h8M12 8v8" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg></span>
          <span class="sq"><svg viewBox="0 0 24 24"><path d="M4 9l8-6 8 6v11H4z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/></svg></span>
          <span class="sq"><svg viewBox="0 0 24 24"><rect x="5" y="7" width="14" height="10" rx="1" fill="none" stroke="#fff" stroke-width="2"/><path d="M5 10h14" stroke="#fff" stroke-width="2"/></svg></span>
          <span class="sq"><svg viewBox="0 0 24 24"><path d="M6 4v16l6-4 6 4V4z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/></svg></span>
        </div>

CSS

.d07-07-04 .row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
        .d07-07-04 .sq{width:52px;height:52px;border-radius:14px;background:#4a4e7a;display:flex;align-items:center;justify-content:center}
        .d07-07-04 svg{width:24px;height:24px}

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