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

角丸タグ型背景アイコンセット

横長の角丸タグを背景にしたアイコン見本です。機能一覧やラベルバッジと組み合わせた表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <span class="tag07-07-11"><svg viewBox="0 0 24 24"><path d="M12 3l2.2 5.6 6 .5-4.6 3.9 1.5 5.8L12 15.9 6.9 18.8l1.5-5.8L3.8 9.1l6-.5z" fill="none" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"/></svg></span>
          <span class="tag07-07-11"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="#fff" stroke-width="1.8"/><path d="M8 12h8M12 8v8" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg></span>
          <span class="tag07-07-11"><svg viewBox="0 0 24 24"><path d="M4 20l6-14h4l6 14M8 15h8" fill="none" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"/></svg></span>
          <span class="tag07-07-11"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.4" fill="none" stroke="#fff" stroke-width="1.8"/><path d="M5 20c1.2-4.4 4.2-6.6 7-6.6s5.8 2.2 7 6.6" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg></span>
        </div>

CSS

.d07-07-11 .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
        .d07-07-11 .tag07-07-11{width:60px;height:34px;border-radius:8px;background:#5b7fe0;display:flex;align-items:center;justify-content:center}
        .d07-07-11 svg{width:20px;height:20px}

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