https://github.com/teenyicons/teenyicons

Tiny minimal 1px icons designed to fit in the smallest places.
https://github.com/teenyicons/teenyicons

1px icons minimal npm-package sprites svg svg-sprites svgs

Last synced: about 1 month ago
JSON representation

Tiny minimal 1px icons designed to fit in the smallest places.

• Host: GitHub
• URL: https://github.com/teenyicons/teenyicons
• Owner: teenyicons
• License: mit
• Created: 2020-07-25T13:51:05.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T15:16:55.000Z (over 1 year ago)
• Last Synced: 2024-05-05T11:22:49.930Z (about 1 month ago)
• Topics: 1px, icons, minimal, npm-package, sprites, svg, svg-sprites, svgs
• Homepage: https://teenyicons.com
• Size: 977 KB
• Stars: 1,786
• Watchers: 20
• Forks: 47
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Funding: .github/funding.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Lists

• awesome-list - teenyicons
• awesome-icons - Teenyicons - 1000+ MIT-licensed SVG icons that easily fit in very small spaces :pinching_hand: and maintain a crisp look :sparkles:. ([Website](https://teenyicons.com)) (General)
• awesome-github-star - teenyicons
• awesome-stars - teenyicons - Tiny minimal 1px icons designed to fit in the smallest places. (Others)
• awesome-stars - teenyicons/teenyicons - Tiny minimal 1px icons designed to fit in the smallest places. (Others)
• awesome-stars - teenyicons/teenyicons - Tiny minimal 1px icons designed to fit in the smallest places. (Others)

README

        






## Why Teenyicons?

Designed on a **15x15** grid, Teenyicons easily fit in very _small spaces_ 🤏 and maintain a _crisp look_ ✨

Preview: [https://teenyicons.com/](https://teenyicons.com/) ([repo](https://github.com/teenyicons/teenyicons.com)) or `npm home teenyicons`

## Install

```bash

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.

```xml

  

```

### Sprites

You can find 3 different sprites:

- [All SVGs](https://unpkg.com/teenyicons/teenyicons-sprite.svg). (Around 510 KB.)

- [Outline only](https://unpkg.com/teenyicons/teenyicons-outline-sprite.svg). (Around 270 KB.)

- [Solid only](https://unpkg.com/teenyicons/teenyicons-solid-sprite.svg). (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:

```xml

  

  

  

  

  

  

```

## Roadmap

- [ ] Tests for SVG dimensions.

- [ ] Frameworks component libraries (Vue, React, etc.)

- [ ] Figma plugin.

## Request an icon

Icon requests are very welcome. Open an [issue](https://github.com/teenyicons/teenyicons/issues/new/choose).

## License

Teenyicons is released under the [MIT License](LICENSE).