iconic / open-iconic

An open source icon set with 223 marks in SVG, webfont and raster formats

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.

open-iconic's Issues

please change name. perhaps typo name ellipses, correct name is ellipsis

I think ellipses is wrong name, correct name is 'ellipsis'.

Please clarify the difference between Open Iconic and Iconic

The Open Iconic page (https://useiconic.com/open) says:

If you're not ready for Iconic (yet), this is the next best stop.

This doesn't tell me much. I can't know if I'm "ready" for Iconic if I don't know the difference :)

Limited to 1000 files per directory?

I think this might be a new thing in Github.

Call for arrows with angles :o)

https://useiconic.com/icons/arrow-right-angle/

Change input text language

Need change the text label of "Browse" (en) to "Escolher" (pt-br). How can i do this?

Icon varieties

Do you accept new icon requests? Are you planning to add more sets?
Some common sets would be great. Especially for forums.

Excess 1px used to bootstrap

bootstrap v4
openIcon v1.1.1

Ion-log-in and ion-log-out icons

I'm not sure if this an issue or intentional...

I suppose we can just flip the icons, but the log-in and log-out icons are duplicated. They do have different codes.

Hope this helps.

Thanks

Joe (Creatively.Me)

webp/account-login-2x.webp missing on CDNJS

List of files on https://cdnjs.com/libraries/open-iconic includes:
"https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/webp/account-login-2x.webp"

Which 403's, as it does not exist on that CDN.

[Request] Icon representing video/webcam disabled

I've looked through a few icon sets and I haven't found a decent icon for representing a video/webcam stream that is disabled/turned off :(

Is this supposed to be equivalent to somehow combining the ban icon along with video? If yes, how does one combine icons? If not, I'm not sure what the process is to request an icon, but I'm creating this issue hoping to find support for this missing icon!

SSL expired on useiconic.com

Cert expired on the 26th

For f**ks' sake, would you just get a damn certificate already, or switch to Let's Encrypt!??!!

See #26.

PS. I can help with the Let's Encrypt route. I love these icons.

Why is there no ruble mark?

https://ru.wikipedia.org/wiki/%D0%A1%D0%B8%D0%BC%D0%B2%D0%BE%D0%BB_%D1%80%D0%BE%D1%81%D1%81%D0%B8%D0%B9%D1%81%D0%BA%D0%BE%D0%B3%D0%BE_%D1%80%D1%83%D0%B1%D0%BB%D1%8F

useiconic.com TLS / SSL CERT expired

Has expired and needs renewed.

First icon in sprite/open-iconic.svg wrapped in <symbol> and not in <defs>

The first icon in this file has a different structure than the rest. It is wrapped in and it is not in . Is this correct?

how to: Open iconic + Bootstrap + angular2+ (angular7 in my case)

The proper way yo use it:
npm i open-iconic

$icon-font-path: '~open-iconic/font/fonts/';
@import "~open-iconic/font/css/open-iconic-bootstrap.scss";

the explanation: (i've also posted an answer in Stack overflow)
https://stackoverflow.com/a/53757247/1727357

SSL expired on useiconic.com

The SSL for useiconic.com expired on Friday, October 20, 2017 at 12:00:00 PM Eastern.

Using iconic in bootstrap buttons

Hello,
today I tried to use open-iconic inside a button in bootstrap v4. Problem is: when applying the class .oi, the button is slightly shifted downward (.oi has top: 1px in it). This is a bit of a problem when using .input-group-append or .input-group-prepend.

Example fiddle produces the following image (note the button shifted downward)

I also tried placing the text inside a <span> element, but this would raise another set of issues while using bootstrap. So, I merely added a CSS rule to my stylesheet:

.oi { top: 0px; }

This being said, I don't understand the purpose of having 1px offset on .oi classes, but I am suspecting that I should not be using things in this way, or that open-iconic shall remove that offset when used inside a button.

Thanks
best regards

Is there a cheat-sheet in this icon?

for that in font-awesome there will be &$xf002; to put in the placeholder

Is there one in open-iconic?

SSL certificate for https://useiconic.com is out of date

When I try to access https://useiconic.com I get an SSL error saying that the certificate is expired.

The certificate states that it will expire after Thursday, April 27, 2017 at 7:59:59 PM GMT-04:00.

I can't even access the HTTP site since it redirects me to the HTTPS version which has an expired certificate.

Maybe add npm installation to readme?

Icon centering

CSS3111 in IE11

Started getting a CSS3111: @font-face encountered unknown error. recently on IE11, there's no more description about the issue:

This is in a blazor app with ie11 version 20H2

Not using same unicode character as other fonts

		HTML Code
		Speaker   | Speaker Low | Speaker High<br/>
		&#128264; |   &#128265; | &#128266;   [Segoe UI Symbol, Segoe UI Emoji, EmojiOne Mozilla]<br/>
		&#57559;  |   &#57558;  | &#57557;    [Open Iconic]

I realize you just can not change it to match, but making both codes refer to the same image should be possible right?

Support WOFF2 font

You support EOT and SVG for dead browsers, so you might as well save bandwidth for new ones.

IE 11 - no icons to view

see the attached file: you will see, that's nothing to see...

CDN

I am considering to switch from FontAwesome to Iconic if it is easy because Bootstrap recommends so.

Please link to a hosted CDN version of Iconic on your documentation because that will be easier for me to deploy than downloading and hosting my own script.

Reference SVG Spritemap from CSS

How to do this from with CSS url() property value?

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

White version

It would be cool if you could also provide a white version of the icons! Do you think that's possible? =)

Incompatible with node version of grunt-webfont

For some reason, the SVGs used in open iconic don't compile correctly using the node engine of grunt webfont. They work fine using fontforge, but when trying to build them with the node engine they render empty.

iconic-file-zip not working

Hello, I have Iconic pro. I am trying to use the iconic-file-zip icon per the instructions below:

https://useiconic.com/icons/file/#icon-font

Iconic may be all about SVG, but it also comes with a killer font. For the full skinny, read our icon font and Bootstrap/Foundation guides.

Unfortunately this only displays a blank file icon, not the ZIP file icon. I have tested most of the other file types with the same results. All other icons appear to be working as expected. Please advise.

OpenIconic not working on IE9

I craft a simple test case here:

iconic

You can see a heart icon if test passed.

Do we need to add svg on cdnjs

Hello @somerandomdude , I am the member of cdnjs project. We want to host this library. There is a question want to ask. I want to confirm that do I need to add all files under svg/ and open-iconic.svg, open-iconic.min.svg under sprite/. Thanks!

cdnjs/cdnjs#9222
cdnjs/cdnjs#10224

Create integration with Semantic UI?

Is it possible to create an integration with Semantic UI?
I would volunteer to help out there...
Thanks

[Request] Save icon

The floppy disk icon is the most quintessential example of an icon in my mind, yet it's surprisingly missing from this set.

The closest icon to a "save" action I see is the hard drive icon, but for "regular" users two blocks with a dot won't mean much.

No "email" icon?

Am I blind or is there really no icon for emails?

Missing files in package

Hi, Is this library intended to be available through npm?

I ran -
npm install --save @icon/open-iconic

but the package installed doesn't have files referenced in the documentation, like the /fonts/ folder:

Thanks

Can't resize through bootstrap file

I'm currently working through a Bootstrap 4 project:
I have the following iconic style-sheet linked within the <head> of my page:

<link rel="stylesheet" href="/../inc/icons/open-iconic/font/css/open-iconic-bootstrap.css" >

and using a briefcase icon like so...

<span class="oi oi-briefcase"></span>

I now see the icon on my page, but in my .scss file, the following has no impact on sizing the icon larger...

   .oi-briefcase {
            width:50px;
            height:50px;
        }

Through developer tools in Chrome, I can see that it's applied to the element and nothing is overriding it. What am I doing wrong or missing?

useiconic.com - SSL expired

useiconic.com uses an invalid security certificate. The certificate expired on July 2, 2018

useiconic.com ssl certificate has expired

Expired: Tuesday, November 26, 2019 at 2:49:19 PM Mountain Standard Time

OpenIconic not working on IE8

sir i'm having issue openiconic on ie8 mode. The icon not showing. What should i do?

question: is there a reason the font is all PUA

and doesn’t assign proper Unicode values where applicable? just curious...

OpenIconic font icon not working in chrome

Hello.

I´m using the bootstrap font icons and is not working in Chrome:

while in Firefox:

Regards!

issue with x svg

The x.svg seems weird

package.json license array format is deprecated and problematic for tool usage

package.json currently lists the projects licenses in an array which is deprecated by npmjs:

Some old packages used license objects or a “licenses” property containing an array of license objects:
...

Those styles are now deprecated. Instead, use SPDX expressions

Projects like https://github.com/microsoft/license-checker-webpack-plugin pick up the license here as either MIT or SIL (generating an incorrect SPDX expression of "(MIT OR OFL-1.1)").

The following changes should be made to this repository:

1. remove package.json/licenses member
2. add package.json/license member with value "(MIT AND OFL-1.1)"
3. rename ICON-LICENSE as LICENSE.MIT
4. rename FONT-LICENSE as LICENSE.OFL-1.1

CSS3111 error with eot file

IE9 and lower have an issue with the .eot file in your pack.

Site useiconic.com does not work

Allow $icon-font-path to be assigned before loading open-iconic-bootstrap.scss

Hi!
Is there a reason why the $icon-font-path doesn't have !default ?
I'n trying to use this library with @angular/cli and I need to overwrite the value the lib gives it
An example here: https://github.com/angular/angular-cli/wiki/stories-include-font-awesome
Is there a way I can manage a similar behavior?
Thanks

[Request] Phone is too modern

My users and I are too adjusted to the handset phone icon. The thing is bent kinda like a C but with bell shapes at both ends.

New icon suggestion.

Why not add a Game icon, a Gun icon and a Knife icon?
Thanks.