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

二色配色アイコンセット(デュオトーン)

濃淡2色を組み合わせたデュオトーン表現のアイコン見本です。柔らかい印象を与えたい特集ページに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <svg viewBox="0 0 40 40"><path d="M20 31c-9-6-13-11-13-16a7 7 0 0 1 13-4z" fill="#e2665a"/><path d="M20 31c9-6 13-11 13-16a7 7 0 0 0-13-4z" fill="#f3b3ad"/></svg>
          <svg viewBox="0 0 40 40"><path d="M6 17l14-10v20z" fill="#3d6b8a"/><path d="M34 17l-14-10v20z" fill="#9dc0d4"/></svg>
          <svg viewBox="0 0 40 40"><rect x="6" y="6" width="28" height="28" rx="4" fill="#4a4e7a"/><path d="M6 20a14 14 0 0 1 14-14v28a14 14 0 0 1-14-14z" fill="#a8abd0"/></svg>
          <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="14" fill="#2d8f6f"/><path d="M20 6a14 14 0 0 1 0 28z" fill="#8fd4bd"/></svg>
        </div>

CSS

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

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