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

業種別ピクトグラムセット

店舗・配送・決済・地図の各業種を表す実用的なピクトグラムをまとめた見本です。総合案内ページの案内表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <svg viewBox="0 0 40 40"><path d="M6 15l3-8h22l3 8z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M8 15v16h24V15" fill="none" stroke="currentColor" stroke-width="2"/><path d="M16 31v-8h8v8" fill="none" stroke="currentColor" stroke-width="2"/></svg>
          <svg viewBox="0 0 40 40"><rect x="4" y="15" width="18" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="2"/><path d="M22 19h8l5 5v3h-13z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><circle cx="12" cy="29" r="2.5" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="29" cy="29" r="2.5" fill="none" stroke="currentColor" stroke-width="2"/></svg>
          <svg viewBox="0 0 40 40"><rect x="5" y="11" width="30" height="20" rx="3" fill="none" stroke="currentColor" stroke-width="2"/><path d="M5 17h30" stroke="currentColor" stroke-width="2"/><path d="M10 24h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
          <svg viewBox="0 0 40 40"><path d="M20 6c6 0 11 5 11 11 0 8-11 17-11 17S9 25 9 17c0-6 5-11 11-11z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><circle cx="20" cy="17" r="4" fill="none" stroke="currentColor" stroke-width="2"/></svg>
        </div>

CSS

.d07-07-06 .row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
        .d07-07-06 svg{width:32px;height:32px;color:#33455a}

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