Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG Icons</title>
</head>
<body>
  
  <!-- eye -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 2 12
             C 2 12 5 5 12 5
             S 22 12 22 12
             C 22 12 19 19 12 19
             S 2 12 2 12
   
             M 12 8
             a 4 4 0 0 1 0 8
             a 4 4 0 0 1 0 -8
​
             M 12 10
             a 2 2 0 0 1 0 4
             a 2 2 0 0 1 0 -4" fill-rule="evenodd"></path>
  </svg>
  
  <!-- drop -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g transform="rotate(45 12 13)">
      <rect x="5" y="6" width="7" height="7"></rect>
      <circle cx="12" cy="13" r="7"></circle>
    </g>
  </svg>
  
  <!-- grid -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="3" y="3" width="8" height="8"></rect>
    <rect x="13" y="3" width="8" height="8"></rect>
    <rect x="3" y="13" width="8" height="8"></rect>
    <rect x="13" y="13" width="8" height="8"></rect>
  </svg>
  
  <!-- toggle -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 8 6
             h 8
             a 6 6 0 0 1 0 12
             h -8
             a 6 6 0 0 1 0 -12
​
             M 16 8
             a 4 4 0 0 1 0 8
             a 4 4 0 0 1 0 -8" fill-rule="evenodd"></path>
  </svg>
  
  <!-- bolt -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 12 3
             v 7
             h 6
             l -6 11
             v -7
             h -6
             l 6 -11"></path>
  </svg>
  
  <!-- target -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 12 2
             a 10 10 0 0 1 0 20
             a 10 10 0 0 1 0 -20
               
             M 12 4
             a 8 8 0 0 1 0 16
             a 8 8 0 0 1 0 -16
               
             M 12 6
             a 6 6 0 0 1 0 12
             a 6 6 0 0 1 0 -12  
               
             M 12 8
             a 4 4 0 0 1 0 8
             a 4 4 0 0 1 0 -8
               
             M 12 10
             a 2 2 0 0 1 0 4
             a 2 2 0 0 1 0 -4" fill-rule="evenodd"></path>
  </svg>
  
  <!-- hamburger -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <rect x="4" y="6" width="16" height="2"></rect>
    <rect x="4" y="11" width="16" height="2"></rect>
    <rect x="4" y="16" width="16" height="2"></rect>
  </svg>
  
  <!-- stack -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="3" y="3" width="14" height="14"></rect>
    <path d="M 19 7
             h 2
             v 14
             h -14
             v -2
             h 12
             v -12"></path>
  </svg>
  
  <!-- heart -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <g transform="rotate(45 12 9)">
      <circle cx="9" cy="12" r="5"></circle>
      <circle cx="15" cy="6" r="5"></circle>
      <path d="M 9 7
               h 1
               v -1
               h 10
               v 11
               h -11
               v -10"></path>
    </g>
  </svg>
  
  <!-- adjust -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 12 3
             a 9 9 0 0 1 0 18
             a 9 9 0 0 1 0 -18
​
             M 12 5
             a 7 7 0 0 1 0 14
             v -14"  fill-rule="evenodd" transform="rotate(45 12 12)"></path>
  </svg>
  
  <!-- scissors -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g transform="rotate(-45 12 12)">
      <path d="M 12 -0.5
             a 4 4 0 0 1 0 8
             a 4 4 0 0 1 0 -8
               
             M 12 1.5
             a 2 2 0 0 1 0 4
             a 2 2 0 0 1 0 -4
               
             M -0.5 12
             a 4 4 0 0 1 8 0
             a 4 4 0 0 1 -8 0
               
             M 1.5 12
             a 2 2 0 0 1 4 0
             a 2 2 0 0 1 -4 0" fill-rule="evenodd"></path>
    <path d="M 11 6
             h 2
             v 5
             h 11.5
             v 2
             h -18.5
             v -2
             h 5
             v -5
             
             M 11 15
             h 2
             v 9.5
             h -2
             v -9.5"></path>
    </g>
  </svg>
  
  <!-- cursor -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 6 3
             l 12 12
             h -7
             l -5 5
             v -17"></path>
  </svg>
  
  <!-- pin -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 4 10
             a 8 8 0 0 1 16 0
             c 0 5 -8 12 -8 12
             c 0 0 -8 -7 -8 -12
             
             M 12 7
             a 3 3 0 0 1 0 6
             a 3 3 0 0 1 0 -6" fill-rule="evenodd"></path>
  </svg>
  
  <!-- ellipsis -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="5" cy="12" r="2"></circle>
    <circle cx="12" cy="12" r="2"></circle>
    <circle cx="19" cy="12" r="2"></circle>
  </svg>
  
  <!-- search -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 3
             a 7 7 0 0 1 0 14
             a 7 7 0 0 1 0 -14
               
             M 10 5
             a 5 5 0 0 1 0 10
             a 5 5 0 0 1 0 -10" fill-rule="evenodd"></path>
      <rect x="14" y="14" width="2" height="8.5" transform="rotate(-45 15 15)"></rect>
  </svg>
​
  <!-- ban -->
  <svg viewBox="0 0 24 24" width="24" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="11" y="4" width="2" height="16" transform="rotate(-45 12 12)"></rect>
    <path d="M 12 3
               a 9 9 0 0 1 0 18
               a 9 9 0 0 1 0 -18
                 
               M 12 5
               a 7 7 0 0 1 0 14
               a 7 7 0 0 1 0 -14" fill-rule="evenodd"></path>
  </svg>
  
</body>
</html>
 
body {
  margin: 20px;
  background: #1c1c1c;
}
​
svg {
  fill: #fff;
  margin: 10px;
  width: 48px;
  height: 48px;
}
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
colebemispro
0viewers