npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

open-iconic

v1.1.1

Published

An open source icon set with marks in SVG, sprite, webfont and raster format

Downloads

110,522

Readme

Open Iconic v1.1.1

Open Iconic is the open source sibling of Iconic. It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. View the collection

What's in Open Iconic?

  • 223 icons designed to be legible down to 8 pixels
  • Super-light SVG files - 61.8 for the entire set
  • SVG sprite—the modern replacement for icon fonts
  • Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats
  • Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats
  • PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px.

Getting Started

For code samples and everything else you need to get started with Open Iconic, check out our Icons and Reference sections.

General Usage

Using Open Iconic's SVGs

We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the alt attribute).

<img src="/open-iconic/svg/icon-name.svg" alt="icon name">

Using Open Iconic's SVG Sprite

Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.

Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. Tip: To make your icons easily style able, we suggest adding a general class to the <svg> tag and a unique class name for each different icon in the <use> tag.

<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>

Sizing icons only needs basic CSS. All the icons are in a square format, so just set the <svg> tag with equal width and height dimensions.

.icon {
  width: 16px;
  height: 16px;
}

Coloring icons is even easier. All you need to do is set the fill rule on the <use> tag.

.icon-account-login {
  fill: #f00;
}

To learn more about SVG Sprites, read Chris Coyier's guide.

Using Open Iconic's Icon Font...

…with Bootstrap

You can find our Bootstrap stylesheets in font/css/open-iconic-bootstrap.{css, less, scss, styl}

<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
…with Foundation

You can find our Foundation stylesheets in font/css/open-iconic-foundation.{css, less, scss, styl}

<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>
…on its own

You can find our default stylesheets in font/css/open-iconic.{css, less, scss, styl}

<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>

License

Icons

All code (including SVG markup) is under the MIT License.

Fonts

All fonts are under the SIL Licensed.