JB Icons v1.0
✦ JB Icons v1.0 — A tribute to JB

Chiseled icons for DivDrop

40 outline SVG icons with a subtle chiseled effect. currentColor — they follow your theme automatically. One sprite file, zero dependencies.

Click any icon to copy its code. Use the colour picker to see theme-aware colour inheritance.

<script src="https://divdrop.io/icons/jb-icons.svg"></script>
Download SVG sprite
40 icons

Navigation

Actions

Status

UI Chrome

Content

home 

  






  

    
How to use

    
Three ways to use JB Icons. The sprite method is recommended — one HTTP request, cached by the browser, works everywhere.


    

      

        
Method 1 — SVG sprite (recommended)

        

          
<!-- Include sprite once (before /body) -->
<script src="https://divdrop.io/icons/jb-icons.svg"
        type="text/javascript"></script>

<!-- Use anywhere -->
<svg width="24" height="24">
  <use href="#jb-home"/>
</svg>

          
        

      


      

        
Method 2 — Inline SVG

        

          
<!-- Paste the SVG directly into HTML -->
<svg width="24" height="24"
     fill="none"
     stroke="currentColor"
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round">
  <path d="M3 12L12 3L21 12"/>
  <!-- ... icon paths ... -->
</svg>

          
        

      


      

        
Colour — three ways

        

          
<!-- 1. CSS color (recommended — theme-aware) -->
<svg style="color: var(--dd-brand)">...</svg>

<!-- 2. Direct stroke -->
<svg stroke="#4f8ef7">...</svg>

<!-- 3. Inherit from parent -->
<div style="color: #e8622a">
  <svg>...</svg>  <!-- terracotta -->
</div>

          
        

      


      

        
Sizing

        

          
<!-- Set width and height on the svg -->
<svg width="16" height="16">...</svg>  <!-- small -->
<svg width="20" height="20">...</svg>  <!-- default -->
<svg width="24" height="24">...</svg>  <!-- medium -->
<svg width="32" height="32">...</svg>  <!-- large -->

<!-- Or with CSS -->
.my-icon { width: 1.25rem; height: 1.25rem; }

          
        

      

    


    
    

      

        

          
        

        

          
currentColor

          
Icons inherit colour from CSS. Works with every DivDrop theme automatically.

        

      

      

        

          
        

        

          
Chiseled effect

          
Subtle light/dark shadow gives depth without gradients or raster images.

        

      

      

        

          
        

        

          
One sprite file

          
Single HTTP request, browser-cached. No per-icon requests, no JS required.

        

      

      

        

          
        

        

          
Scales perfectly

          
SVG renders crisp at any size — 12px to 512px, Retina included.