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

SNSブランドアイコン風セット

共有・チャット・カメラ・再生などSNSでよく使われる汎用形状のアイコンをまとめた見本です。フォローボタン周りの装飾に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <span class="circ"><svg viewBox="0 0 24 24"><path d="M4 12l16-8-6 16-3-6-6-2z" fill="#fff"/></svg></span>
          <span class="circ"><svg viewBox="0 0 24 24"><path d="M4 6h16v10H9l-3 3v-3H4z" fill="#fff"/></svg></span>
          <span class="circ"><svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/><circle cx="12" cy="12" r="3.2" fill="none" stroke="#fff" stroke-width="2"/></svg></span>
          <span class="circ"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/><path d="M10 8l6 4-6 4z" fill="#fff"/></svg></span>
        </div>

CSS

.d07-07-07 .row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
        .d07-07-07 .circ{width:48px;height:48px;border-radius:50%;background:#333;display:flex;align-items:center;justify-content:center}
        .d07-07-07 svg{width:22px;height:22px}

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