teenyicons: A repository from optimista

Why Teenyicons?

Designed on a 15x15 grid, Teenyicons easily fit in very small spaces 🤏 and maintain a crisp look ✨

Preview: https://teenyicons.com/ (repo) or npm home teenyicons

Install

npm i teenyicons
yarn add teenyicons

Usage

Inline

Copy the SVGs you wish to use from outline and solid directories inside node_modules/teenyicons and inline them in your HTML. Use CSS's color to change the SVG's color.

<svg class="w-4 h-4 text-white" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 1.5h1.5a6 6 0 110 12H0m7-12h4.5a3 3 0 110 6m0 0H9m2.5 0h-2m2 0a3 3 0 110 6H7" stroke="currentColor"/>
</svg>

Sprites

You can find 3 different sprites:

All SVGs. (Around 510 KB.)
Outline only. (Around 270 KB.)
Solid only. (Around 240 KB.)

To use one of them, inline the sprite in your HTML or put it in some /path/to/sprite.svg and include an icon as such:

<svg class="tiny-cyan-icon">
  <!-- Inlined sprite. Possible variants are outline and solid. -->
  <use xlink:href="#variant--icon-id"/>
</svg>

<svg width="15" height="15" style="color: slateblue">
  <!-- Outline sprite -->
  <use xlink:href="teenyicons-outline-sprite.svg#outline--360"/>
</svg>

<svg class="h-5 w-5 text-gray-800">
  <!-- Solid sprite -->
  <use xlink:href="teenyicons-solid-sprite.svg#solid--globe-africa"/>
</svg>

Roadmap

Tests for SVG dimensions.
Frameworks component libraries (Vue, React, etc.)
Figma plugin.

Request an icon

Icon requests are very welcome. Open an issue.

License

Teenyicons is released under the MIT License.

optimista/teenyicons