Designed on a 15x15 grid, Teenyicons easily fit in very small spaces 🤏 and maintain a crisp look ✨
Preview: https://teenyicons.com/ (repo)
npm i teenyicons
yarn add teenyiconsCopy 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 470 KB.)
- Outline only. (Around 250 KB.)
- Solid only. (Around 220 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>You can get an array of all available icons using:
import icons from "teenyicons";
console.log(Object.keys(icons));Icon requests are very welcome. Open an issue.
Teenyicons is released under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
