Iconoclash!

Hi there! This is a preview page of SVG icons generated by IconoClash.

Here are the SVGs, all referenced from the same external sprite (5.39kb gzip). We changed some fill and stroke colors on hover to demonstrate how that works visually.

• calc

  SVG External

  <svg><use href="calc.svg#calc"></use></svg>

  CSS Background

  <div class="iconoclash-calc"></div>

  Customizations

  Shared customizations

  --iconoclash-shared-0: none;
  --iconoclash-shared-0: none;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  

• clipboard

  SVG External

  <svg><use href="clipboard.svg#clipboard"></use></svg>

  CSS Background

  <div class="iconoclash-clipboard"></div>

  Customizations

  Shared customizations

  --iconoclash-shared-0: none;
  --iconoclash-shared-0: none;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-3: #FFFFFE;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-1: #233881;
  

• compass

  SVG External

  <svg><use href="compass.svg#compass"></use></svg>

  CSS Background

  <div class="iconoclash-compass"></div>

  Customizations

  Shared customizations

  --iconoclash-shared-0: none;
  --iconoclash-shared-0: none;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  

• gear

  SVG External

  <svg><use href="gear.svg#gear"></use></svg>

  CSS Background

  <div class="iconoclash-gear"></div>

  Customizations

  Shared customizations

  --iconoclash-shared-0: none;
  --iconoclash-shared-0: none;
  --iconoclash-shared-3: #FFFFFE;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-3: #FFFFFE;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-1: #233881;
  

• hammer

  SVG External

  <svg><use href="hammer.svg#hammer"></use></svg>

  CSS Background

  <div class="iconoclash-hammer"></div>

  Customizations

  Shared customizations

  --iconoclash-shared-0: none;
  --iconoclash-shared-0: none;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-1: #233881;
  

• hardhat

  SVG External

  <svg><use href="hardhat.svg#hardhat"></use></svg>

  CSS Background

  <div class="iconoclash-hardhat"></div>

  Customizations

  Shared customizations

  --iconoclash-shared-0: none;
  --iconoclash-shared-0: none;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  

• triangle

  SVG External

  <svg><use href="triangle.svg#triangle"></use></svg>

  CSS Background

  <div class="iconoclash-triangle"></div>

  Customizations

  Shared customizations

  --iconoclash-shared-0: none;
  --iconoclash-shared-0: none;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  

• wrench

  SVG External

  <svg><use href="wrench.svg#wrench"></use></svg>

  CSS Background

  <div class="iconoclash-wrench"></div>

  Customizations

  Shared customizations

  --iconoclash-shared-0: none;
  --iconoclash-shared-0: none;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-3: #FFFFFE;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-2: #64C5E5;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-3: #FFFFFE;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-3: #FFFFFE;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-3: #FFFFFE;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-3: #FFFFFE;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-3: #FFFFFE;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-3: #FFFFFE;
  --iconoclash-shared-1: #233881;
  --iconoclash-shared-3: #FFFFFE;
  --iconoclash-shared-1: #233881;