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

円背景付きアイコンセット

各アイコンを円形の色付き背景に収めた見本です。サービス紹介セクションの特徴アイコンなどに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <span class="circ"><svg viewBox="0 0 24 24"><path d="M12 4 L20 11 V20 H4 V11 Z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/></svg></span>
          <span class="circ"><svg viewBox="0 0 24 24"><path d="M4 6h16v12H4z" fill="none" stroke="#fff" stroke-width="2"/><path d="M4 7l8 6 8-6" fill="none" stroke="#fff" stroke-width="2"/></svg></span>
          <span class="circ"><svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" fill="none" stroke="#fff" stroke-width="2"/><path d="M5 21c1-4 5-6 7-6s6 2 7 6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg></span>
          <span class="circ"><svg viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/></svg></span>
        </div>

CSS

.d07-07-03 .row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
        .d07-07-03 .circ{width:52px;height:52px;border-radius:50%;background:#3d6b8a;display:flex;align-items:center;justify-content:center}
        .d07-07-03 svg{width:24px;height:24px}

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