Code Monkey home page Code Monkey logo

teenyicons's Introduction

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:

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.

teenyicons's People

Contributors

dependabot[bot] avatar smhmd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

teenyicons's Issues

[Icon request] Icon

Icon Request

  • socket-io/ bolt icon

    • this icon is from this https://socket.io/
    • this means for speed or lighting or energy
    • some image
      image
  • CodeIgniter / Fire

    • this is an icon of a framework called Codeigniter
    • some images
      image
  • Brain icon

    • this is an Icon that shows brain
      image
      image

solid/eye.svg is 17x15

All icons are 15x15, but solid/eye.svg is 17x15.

Compared to outline, it has sharp edges on left and right side, which results in 15.08px shape and cause wider viewBox, while outline icon has smooth edges.

How to donate?

Hey. Thank you for your hard work. The project is useful to me. I was looking for a "donate" button, but I couldn't find it.

[Icon request] feed/newsfeed/RSS

Icon Request

  • Icon name/desc: feed (news feed, RSS feed, Atom feed)
  • Use case: Points to a resource for syndication of content
  • Screenshots of similar icons:
    Similar to Wi-fi icon, but from bottom-left corner pointing toward top-right corner.

[Icon request] Donate

Icon Request

  • Icon name/desc: donate
  • Use case: for donations
  • Screenshots of similar icons:
    image
    image
    image

Invalid grid for few icons

Several icons do not follow 15x15 grid:

outline/alien: 15 x 16
outline/angular: 17 x 17
outline/bank: 15 x 16
outline/building: 15 x 16
outline/css3: 17 x 16
outline/hospital: 15 x 16
outline/html5: 17 x 16
outline/pool: 15 x 16
outline/router: 15 x 16
outline/shield-tick: 15 x 17
outline/shield-x: 15 x 17
solid/alien: 15 x 16
solid/bank: 15 x 16
solid/building: 15 x 16
solid/hospital: 15 x 16
solid/pool: 15 x 16
solid/router: 15 x 16

Teenyicon Licence

Hey Anja!

I love your work on the teenyicons. Very beautiful and perfectly balanced icons, on a complete and extensive set! :)
I used your icons in Figma as placeholders in the UX screens of an app I’m designing for my company. They fit so well that I’m thinking to use some of them in the actual UI. Plus we will design internally some more required icons that are currently missing from your set.

I had a look at the CC license and the MIT license but couldn’t figure out if your icons are free to use for commercial use? Is there an attribution to the author required? You can ping me at [email protected].

Thank you very much for sharing your work,
Simone

Lamp Icon

Icon Request

  • Icon name/desc: Table Lamp
  • Use case: can be used to study related websites or on books websites
  • Screenshots of similar icons:
    Screenshot from 2020-08-01 15-25-23

NPM publish is empty

Hi!

Empty folder

It seems to me npm installation is empty. I use yarn, I tried both dev and prod mode.
I thought maybe I don't know something about node's module resolution, but rollup kind of fails to import file by these paths as well (all the plugins are present of course):
import loaderIcon from 'teenyicons/src/outline/loader.svg';
import loaderIcon from 'teenyicons/outline/loader.svg';

Do you have any ideas why this can happen?

Thanks for your project, it's awesome! I easily use your icons almost exclusively in my projects!

[Icon request] Feedback Icon

Icon Request

  • Icon name/desc: feedback
  • Use case: for showing feedback or writing feedback
  • Screenshots of similar icons:
    image

Bulb Icon

Icon Request

  • Icon name/desc: Bulb
  • Use case: can be used in many Websites as daylight theme
  • Screenshots of similar icons:

make two one is this which shows bulb glow and other is without sparkles.

bulb

[Icon request] New tab

Icon Request

  1. Open new Tab icon

this is mostly used in web to when opening a link to a new tab.
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.