コピペで使えるSVGアイコン素材集 ～ その３

• ホーム
• Javascript,CSS,HTMLデザイン無料素材集
• コピペで使えるSVGアイコン素材集 ～ その３

インラインSVGタグアイコン。ソースコードのコピペで簡単にHTMLにSVGアイコンを描画できます。
fill(塗りつぶし色)、stroke(線の色)、stroke-width(線の太さ)、width(表示する大きさ)を変更すれば、好みの色や大きさに表示できます。

顔 アイコン

HTML・CSSソースコードを見る

<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M8,32 A24,24 0,0,0 56,32 A24,24 0,0,0 8,32 z"
    style="fill:#FE0;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;"/>
  <path d="M18,36 A12,10 0,0,0 46,36 z"
    style="fill:#FFF;stroke:#222;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;"/>
  <path d="M24,16 A3,4 0,0,0 24,28 A3,4 0,0,0 24,16"
    style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
  <path d="M40,16 A3,4 0,0,0 40,28 A3,4 0,0,0 40,16"
    style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
</svg>

<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M8,32 A24,24 0,0,0 56,32 A24,24 0,0,0 8,32 z"
    style="fill:#FE0;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;"/>
  <path d="M18,42 A16,14 0,0,1 46,42"
    style="fill:none;stroke:#222;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;"/>
  <path d="M24,16 A3,4 0,0,0 24,28 A3,4 0,0,0 24,16"
    style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
  <path d="M40,16 A3,4 0,0,0 40,28 A3,4 0,0,0 40,16"
    style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
</svg>

<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M8,32 A24,24 0,0,0 56,32 A24,24 0,0,0 8,32 z"
    style="fill:#FE0;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;"/>
  <path d="M32,38 A2,4 0,0,0 32,48 A4,4 0,0,0 32,38"
    style="fill:#222;stroke:#222;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"/>
  <path d="M24,16 A3,4 0,0,0 24,28 A3,4 0,0,0 24,16"
    style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
  <path d="M40,16 A3,4 0,0,0 40,28 A3,4 0,0,0 40,16"
    style="fill:#000;stroke:none;stroke-linecap:round;stroke-linejoin:round;"/>
</svg>

<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M8,32 A24,24 0,0,0 56,32 A24,24 0,0,0 8,32"
    style="fill:#FE0;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;"/>
  <path d="M18,36 A10,8 0,0,0 46,36" style="fill:none;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;"/>
  <path d="M20,26 A4,4 0,0,1 28,26" style="fill:none;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;"/>
  <path d="M36,26 A4,4 0,0,1 44,26" style="fill:none;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;"/>
</svg>

ハート アイコン

HTML・CSSソースコードを見る

<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M32,58 l-24,-24 a14,14 0,1,1 24,-8 a14,14 0,1,1 24,8 z"
    style="fill:#F33;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
</svg>
<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M32,58 l-24,-24 a14,14 0,1,1 24,-8 a14,14 0,1,1 24,8 z"
    style="fill:#C3C;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
</svg>
<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M32,58 l-24,-24 a14,14 0,1,1 24,-8 a14,14 0,1,1 24,8 z"
    style="fill:#3F3;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
</svg>

吹き出し アイコン

HTML・CSSソースコードを見る

<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M8,20 A4,4 0,0,1 12,16 L52,16 A4,4 0,0,1 56,20 L56,44 A4,4 0,0,1 52,48 L48,48 L40,58 L44,48 L12,48 A4,4 0,0,1 8,44 z"
    style="fill:#EEE;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
</svg>
<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M8,20 A4,4 0,0,1 12,16 L52,16 A4,4 0,0,1 56,20 L56,44 A4,4 0,0,1 52,48 L28,48 L36,58 L20,48 L12,48 A4,4 0,0,1 8,44 z"
    style="fill:#EEE;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M13,32 a3,3 0,0,1 6,0  a3,3 0,0,1 -6,0 z" style="fill:#222;stroke:none;" />
  <path d="M29,32 a3,3 0,0,1 6,0  a3,3 0,0,1 -6,0 z" style="fill:#222;stroke:none;" />
  <path d="M45,32 a3,3 0,0,1 6,0  a3,3 0,0,1 -6,0 z" style="fill:#222;stroke:none;" />
</svg>

カード アイコン

HTML・CSSソースコードを見る

<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M4,16 A4,4 0,0,1 8,12 L56,12 A4,4 0,0,1 60,16 L60,48 A4,4 0,0,1 56,52 L8,52 A4,4 0,0,1 4,48 z"
    style="fill:#EB0;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M6,20 L58,20 L58,24 L6,24 z" style="fill:#666;stroke:none;" />
  <path d="M12,30 L52,30 L52,42 L12,42 z" style="fill:#FFF;stroke:none;" />
  <path d="M16,39 l0,-6 l6,6 l0,-6" style="fill:none;stroke:#333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M28,39 l0,-6 l6,6 l0,-6" style="fill:none;stroke:#333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M40,39 l0,-6 l6,6 l0,-6" style="fill:none;stroke:#333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;" />
</svg>

チャート アイコン

HTML・CSSソースコードを見る

<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M4,4 L60,4 L60,60 L4,60 z"
    style="fill:#EEE;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M6,22 L58,22"
    style="fill:none;stroke:#AAA;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M6,40 L58,40"
    style="fill:none;stroke:#AAA;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M22,6 L22,58"
    style="fill:none;stroke:#AAA;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M40,6 L40,58"
    style="fill:none;stroke:#AAA;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M6,50 L26,30 L36,38 L58,20"
    style="fill:none;stroke:#F00;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;" />
</svg>
<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M4,4 L60,4 L60,60 L4,60 z"
    style="fill:#EEE;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M6,22 L58,22"
    style="fill:none;stroke:#AAA;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M6,40 L58,40"
    style="fill:none;stroke:#AAA;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M22,6 L22,58"
    style="fill:none;stroke:#AAA;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M40,6 L40,58"
    style="fill:none;stroke:#AAA;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M12,58 L12,38 L20,38 L20,58"
    style="fill:#F00;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M28,58 L28,16 L36,16 L36,58"
    style="fill:#0F0;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M44,58 L44,24 L52,24 L52,58"
    style="fill:#00F;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;" />
</svg>
<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M32,32 L32,4 A28,28 0,0,1 32,60 z"
    style="fill:#0F0;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M32,32 L32,60 A28,28 0,0,1 4,32 z"
    style="fill:#F00;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M32,32 L4,32 A28,28 0,0,1 32,4 z"
    style="fill:#00F;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M32,4 a28,28 0,0,1 0,56 a28,28 0,0,1 0,-56 z"
    style="fill:none;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
</svg>

鍵 アイコン

HTML・CSSソースコードを見る

<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M12,30 L52,30 L52,62 L12,62 z"
    style="fill:#FC0;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M14,20 a18,18 0,0,1 36,0 l0,10 l-8,0 l0,-10 a10,10 0,0,0 -20,0 l0,10 l-8,0 z"
    style="fill:#BBB;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
</svg>
<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M12,30 L52,30 L52,62 L12,62 z"
    style="fill:#FC0;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M14,20 a18,18 0,0,1 36,0 l0,10 l-8,0 l0,-10 a10,10 0,0,0 -20,0 l0,4 l-8,0 z"
    style="fill:#BBB;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
</svg>
<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M28,32 A14,14 0,1,1 36,32 l0,26 l-4,4 l-8,-8 l4,-4 l-4,-4 l4,-4 l-4,-4 l4,-4  z"
    style="fill:#FC0;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M32,12 a4,4 0,0,1 0,8 a4,4 0,0,1 0,-8 z"
    style="fill:#FFF;stroke:#222;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;" />
</svg>

旗 アイコン

HTML・CSSソースコードを見る

  <svg style="width:32px;" viewBox="0 0 64 64">
    <path d="M4,60 L4,6 A3,3 0,0,1 10,6 L10,60 z"
      style="fill:#FFF;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
    <path d="M10,6 A24,24 0,0,0 34,6 A32,32 0,0,1 60,6 L60,36 A32,32 0,0,0 34,36 A24,34 0,0,1 10,34 z"
      style="fill:#FF0;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  </svg>
  <svg style="width:32px;" viewBox="0 0 64 64">
    <path d="M4,60 L4,6 A3,3 0,0,1 10,6 L10,60 z"
      style="fill:#FFF;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
    <path d="M10,6 A24,24 0,0,0 34,6 A32,32 0,0,1 60,6 L60,36 A32,32 0,0,0 34,36 A24,34 0,0,1 10,34 z"
      style="fill:#0FF;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  </svg>
  <svg style="width:32px;" viewBox="0 0 64 64">
    <path d="M4,60 L4,6 A3,3 0,0,1 10,6 L10,60 z"
      style="fill:#FFF;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
    <path d="M10,6 A24,24 0,0,0 34,6 A32,32 0,0,1 60,6 L60,36 A32,32 0,0,0 34,36 A24,34 0,0,1 10,34 z"
      style="fill:#F0F;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  </svg>

足跡 アイコン

HTML・CSSソースコードを見る

<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M20,60 A8,8 0,0,1 16,48 A18,24 0,0,1 48,48 A8,8 0,0,1 44,60 A32,32 0,0,0 20,60 z"
    style="fill:#944;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M10,20 a4,8 0,0,1 0,16 a4,8 0,0,1 0,-16 z"
    style="fill:#944;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M24,8 a4,8 0,0,1 0,16 a4,8 0,0,1 0,-16 z"
    style="fill:#944;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M40,8 a4,8 0,0,1 0,16 a4,8 0,0,1 0,-16 z"
    style="fill:#944;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M54,20 a4,8 0,0,1 0,16 a4,8 0,0,1 0,-16 z"
    style="fill:#944;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
</svg>

ファイル アイコン

HTML・CSSソースコードを見る

<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M12,4 L44,4 L52,12 L52,60 L12,60 z"
    style="fill:#FFF;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M20,16 L40,16"
    style="fill:none;stroke:#BBB;stroke-width:6;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M20,28 L44,28"
    style="fill:none;stroke:#BBB;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M20,38 L44,38"
    style="fill:none;stroke:#BBB;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;" />
  <path d="M20,48 L44,48"
    style="fill:none;stroke:#BBB;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;" />
</svg>
<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M4,14 l2,-8 l12,0 l2,8 l36,0 l0,44 l-52,0 z"
    style="fill:#EA5;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M8,22 l52,0 l-4,36 l-52,0 z"
    style="fill:#FC8;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
</svg>

その他 アイコン

HTML・CSSソースコードを見る

<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M4,4 L60,4 L60,20 L4,20 z"
    style="fill:#F66;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M4,20 L60,20 L60,60 L4,60 z"
    style="fill:#FFF;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M4,4 L60,4 L60,60 L4,60 z"
    style="fill:none;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
  <path d="M12,28 L52,28"
    style="fill:none;stroke:#BBB;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:4 2" />
  <path d="M12,36 L52,36"
    style="fill:none;stroke:#BBB;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:4 2" />
  <path d="M12,44 L52,44"
    style="fill:none;stroke:#BBB;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:4 2" />
  <path d="M12,52 L52,52"
    style="fill:none;stroke:#BBB;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:4 2" />
</svg>
<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M40,48 l0,-36 a8,8 0,0,0 -16,0 l0,40 a6,6 0,0,0 12,0 l0,-28 a4,4 0,0,0 -8,0 l0,20"
    style="fill:none;stroke:#666;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;" />
</svg>
<svg style="width:32px;" viewBox="0 0 64 64">
  <path d="M40,4 L16,36 L32,36 L24,60 L48,28 L32,28 z"
    style="fill:#FF0;stroke:#222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;" />
</svg>