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

線画スタイルアイコンセット

細い線だけで構成したアウトラインアイコンを横に並べた見本です。ナビゲーションやメニュー項目のアイコン表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <svg viewBox="0 0 40 40"><path d="M8 20 L20 9 L32 20 M12 17 V31 H28 V17" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/></svg>
          <svg viewBox="0 0 40 40"><path d="M20 31c-9-6-13-11-13-16a7 7 0 0 1 13-4 7 7 0 0 1 13 4c0 5-4 10-13 16z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
          <svg viewBox="0 0 40 40"><path d="M20 7 L24 16 L34 17 L26 24 L28 34 L20 29 L12 34 L14 24 L6 17 L16 16 Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
          <svg viewBox="0 0 40 40"><rect x="7" y="11" width="26" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 12 L20 22 L32 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <svg viewBox="0 0 40 40"><circle cx="17" cy="17" r="9" fill="none" stroke="currentColor" stroke-width="2"/><line x1="24" y1="24" x2="32" y2="32" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        </div>

CSS

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

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