Humbleicons

Install

Humbleicons are published to npm, but they can also be manually downloaded if needed.

npm

Install Humbleicons — including SVGs and icon sprite. Then, choose how you’d like to include the icons with the usage instructions.

npm i humbleicons

Download

Releases are published on GitHub and include icon SVGs and sprites.

Download latest ZIP

---

Usage

Humbleicons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup.

Embedded

Embed your icons within the HTML of your page.

<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="humbleicons">
  <g stroke="currentColor" stroke-width="2">
    <path d="M6 16l4.5 4.5 4-4a.707.707 0 011 0v0a.707.707 0 001 0l2.293-2.293a1 1 0 000-1.414l-2.086-2.086a1 1 0 010-1.414l3.586-3.586a1 1 0 000-1.414l-.586-.586a1 1 0 00-1.414 0l-3.586 3.586a1 1 0 01-1.414 0l-2.086-2.086a1 1 0 00-1.414 0L7.5 7.5a.707.707 0 000 1v0a.707.707 0 010 1l-4 4L6 16zm0 0l2.5-2.5"/>
    <path d="M7.5 8.5l8 8"/>
  </g>
</svg>

Sprite

Use the SVG sprite to insert any icon through the <use> element. Use the icon’s filename as the fragment identifier (e.g., brush-big is #brush-big). SVG sprites allow you to reference an external file similar to an <img> element, but with the power of currentColor for easy theming.

<svg class="humbleicons">
  <use xlink:href="humbleicons.svg#brush-big"/>
</svg>

---

Styling

Every icon or sprite has a class humbleicons. Use this CSS class to style all the icons on your website. This is a recommended style that sets the size and color of the icon according to the surrounding font:

.humbleicons {
	width: 1.2em;
	height: 1.2em;
	display: inline-block;
	align-self: center;
	vertical-align: middle;
	margin-top: -0.1em;
}

You can change the style of a particular icon using CSS:

An icon can be bigger or in different color.

An icon can be <svg class="humbleicons" style="font-size: 2rem"><use xlink:href="humbleicons.svg#trash"/></svg> bigger or in <svg class="humbleicons" style="color: red"><use xlink:href="/assets/humbleicons.svg#exclamation-triangle"/></svg> different color.