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

グラデーション背景アイコンセット

円形の背景にグラデーションを敷いたアイコン見本です。目を引かせたい特徴紹介やサービス一覧に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <span class="g g1"><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="g g2"><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>
          <span class="g g3"><svg viewBox="0 0 24 24"><path d="M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/><circle cx="12" cy="10" r="2.5" fill="none" stroke="#fff" stroke-width="2"/></svg></span>
          <span class="g g4"><svg viewBox="0 0 24 24"><path d="M4 6h16v10H9l-3 3v-3H4z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/></svg></span>
        </div>

CSS

.d07-07-10 .row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
        .d07-07-10 .g{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}
        .d07-07-10 .g1{background:linear-gradient(135deg,#5b7fe0,#8f5be0)}
        .d07-07-10 .g2{background:linear-gradient(135deg,#2d8f6f,#5bc9a4)}
        .d07-07-10 .g3{background:linear-gradient(135deg,#e2665a,#e8a13c)}
        .d07-07-10 .g4{background:linear-gradient(135deg,#3d6b8a,#5ba0c9)}
        .d07-07-10 svg{width:22px;height:22px}

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