Free icons for your better UI

A pack of simple, neutral, carefully crafted icons that you can use in your personal and commercial projects for free.

Install Usage Styling

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.

Designed by @Zraly.