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
npm i teenyicons
yarn add teenyicons
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>
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>
- Tests for SVG dimensions.
- Frameworks component libraries (Vue, React, etc.)
- Figma plugin.
Icon requests are very welcome. Open an issue.
Teenyicons is released under the MIT License.