Article:

Open Iconic: A Collection of Legible Icons for Web Design

In today’s digital landscape, icons play a crucial role in user interface design. They provide visual cues and help users navigate through digital interfaces more efficiently. However, finding the right icons that are highly legible and compatible with different devices and frameworks can be a challenge. That’s where Open Iconic comes in.

Open Iconic is an open-source collection of 223 icons specifically designed to be legible even at the smallest sizes. Developed as the open-source sibling of the Iconic collection, Open Iconic offers a wide range of icons with a tiny footprint that’s ready to use with popular frameworks like Bootstrap and Foundation.

What’s in Open Iconic?

Open Iconic includes a comprehensive collection of 223 icons, each designed to be legible down to 8 pixels. The icons are provided in super-light SVG files, resulting in a total file size of just 61.8 kilobytes for the entire collection. This makes Open Iconic an ideal choice for web designers who prioritize performance and quick loading times.

In addition to SVG files, Open Iconic offers other file formats such as PNG and WebP for raster images, as well as webfont stylesheets in CSS, LESS, SCSS, and Stylus formats. These stylesheets come with versions tailored for Bootstrap and Foundation, making it seamless to integrate Open Iconic icons into existing projects built on these frameworks.

Getting Started with Open Iconic

To start using Open Iconic, head over to the official website and explore the Icons and Reference sections. There, you’ll find code samples and everything you need to know about using the icons in your projects.

General Usage

Open Iconic icons are provided as SVG files, so you can use them just like any other image on the web. Simply include the SVG file and don’t forget to add the alt attribute for accessibility.

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

Alternatively, you can use Open Iconic’s SVG sprite, which allows you to display all the icons in the collection with a single request. It functions similarly to an icon font, but without the drawbacks. To add an icon from the SVG sprite, use the <use> tag and assign a unique class name for each different icon.

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

When styling icons, you can simply adjust the width and height dimensions of the <svg> tag to achieve the desired size. Additionally, changing the fill rule on the <use> tag allows you to apply different colors to the icons.

To learn more about SVG sprites and how to use them effectively, consider reading Chris Coyier’s guide on CSS-Tricks.

Integration with Bootstrap and Foundation

Open Iconic provides specific stylesheets for seamless integration with popular frameworks like Bootstrap and Foundation.

If you’re using Bootstrap, include the Open Iconic Bootstrap stylesheet in your project:

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

Then, you can utilize the icons using the following code:

html
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

For Foundation users, include the Open Iconic Foundation stylesheet:

html
<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">

To display an icon, use the following code:

html
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>

Alternatively, if you’re not using any specific framework, you can include the default Open Iconic stylesheet:

html
<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">

Then, use the following code to display an icon:

html
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>

Licensing

Icon collections like Open Iconic often come with licensing considerations. However, Open Iconic simplifies the licensing aspect by offering all its code (including SVG markup) under the MIT License. This grants users the freedom to use the icons in both personal and commercial projects without any restrictions.

Regarding fonts, Open Iconic fonts are licensed under the SIL License, which ensures that they can be used and modified for any purpose without restrictions.

In conclusion, Open Iconic provides a comprehensive collection of legible icons designed specifically for web usage. With its lightweight file sizes, compatibility with popular frameworks, and open-source nature, it offers an excellent choice for web designers looking for high-quality icons. Explore Open Iconic today and elevate your web design projects with visually appealing and highly legible icons.

License:
All code (including SVG markup) is under the MIT License.
Fonts are under the SIL License.