SSABox Icons is an open-source, neutral-style collection of system icons for designers and developers. Unlike our fragmented icon library, all 2500+ icons have been carefully crafted to ensure readability, compatibility, and pixel-perfect genes. Each icon is designed in "Outline" and "Fill" styles based on a 24x24 grid. Of course, all icons are free for personal and commercial use.

Go To SSABox Icon Library to find all icons,

Usage

CDN

Copy the following code and add it to the <head> tag of your html document.

  <link rel="stylesheet" href="https://ssaicon.pages.dev/fonts/ssaicon.css"/>

Or

Copy the following code using copy button and add <style>{code}</style> tag or ssaicon.css and link in your html document.

Use

Icon font

Icon fonts with classes for every icon are also included for SSATools Icons. Include the icon web fonts in your page via CSS, then reference the class names as needed in your HTML (e.g., <i class="ssa-home-line"></i>).

Add icon with class name, class name rule: ssa-{name}-{style}

<i class="ssa-home-line"></i>
<i class="ssa-home-fill"></i>

Use font-size and color to change the icon appearance.

<i class="ssa-home-line" style="color: blue; font-size:20px"></i>
<i class="ssa-home-fill" style="color: #cc0000; font-size:30px"></i>

Note: We changed the class name prefixes from SSABox - to ssa.

Embedded

Embed your icons within the HTML of your page (as opposed to an external image file). Here we’ve used a custom width and height.

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z"/></svg>

Note: You can go to SSABox Icon Library to check the name of the icons. -line means the outlined style icon, and -fill means the filled style icon.

 

Sizing

SSABox Icon can be resized by css class integrated by ssaicon.css . Icons inherit the font-size of their parent container and with the following classes you can increase or decrease the size of icons relative to that inherited font-size. You can also use ssa-fw class for a fixed width for icons. For example:

 

<div style="font-size: 24px;">

  <i class="ssa-home-line ssa-fw"></i> <!-- fixed width -->

  <i class="ssa-home-line ssa-xxs"></i> <!-- 0.5em -->

  <i class="ssa-home-line ssa-xs"></i> <!-- 0.75em -->

  <i class="ssa-home-line ssa-sm"></i> <!-- 0.875em -->

  <i class="ssa-home-line ssa-1x"></i> <!-- 1em -->

  <i class="ssa-home-line ssa-lg"></i> <!-- 1.3333em -->

  <i class="ssa-home-line ssa-xl"></i> <!-- 1.5em -->

  <i class="ssa-home-line ssa-2x"></i> <!-- 2em -->

  <i class="ssa-home-line ssa-3x"></i> <!-- 3em -->

  ...

  <i class="ssa-home-line ssa-10x"></i> <!-- 10em -->

</div>

You can check the ssaicon.css file for more info and details.

 

SVG Sprite Usage

Download ssaicon.symbol.svg file into your project directory，use icons with the <use> element, such as:

 

<svg class='ssabox'>

  <use xlink:href="your-path/ssaicon.symbol.svg#ssa-home-fill"></use>

</svg>

.ssabox {

  width: 24px;

  height: 24px;

  fill: #333;

}

Note: ssa-admin-fill after the # in the above example can be replaced with any valid icon name of SSABox Icon. You can go to SSABox Icon Library to check the name of the icons. -line means the outlined style icon, and -fill means the filled style icon.