OpenWeb Icons (a font!)

Why OpenWeb Icons? Because Font Awesome had no RSS-icon and a font with only one icon would be a bit boring... Besides, I'm an advocate of the Open Web! Be proud of using Open Web Standards and show it to the world!

Download ZIP File Download TAR Ball View On GitHub

Sharing is caring!

Main Icons

Icon class-name About Icon Sources
icon-apml APML (Attention Profile Markup Language) allows users to share their own personal Attention Profile in much the same way that OPML allows the exchange of reading lists between News Readers. by Brian Suda
icon-open-share The Open Share icon conveys the act of sharing by visually representing one hand passing an object to another hand, as in "pass it on" or "sharing". The icon also represents an "eye", as in "look at this". by Shareaholic
icon-open-share-simple
icon-share An icon to represent the generic action of sharing a web page. This could mean adding the page to a social bookmarking site or memetracker, e-mailing the page to someone, etc. by Shareicons.com
icon-share-simple
icon-feed A web feed (or news feed) is a data format used for providing users with frequently updated content. Content distributors syndicate a web feed, thereby allowing users to subscribe to it. by Feedicons.com
icon-feed-simple
icon-ostatus OStatus is an open standard for distributed status updates. Our goal is a specification that allows different messaging hubs to route status updates between users in near-real-time. by OStatus.org
icon-ostatus-simple
icon-opml OPML an XML-based format that allows exchange of outline-structured information between applications running on different operating systems and environments. by Opmlicons.com
Icon class-name About Icon Sources
icon-activity The Activity Streams specification defines a format for describing socially interesting events, or "Activities", about the people and things an individual may care about. by AS-Wiki
icon-activity-simple
icon-geo The Geotag Icon is intended as a web “standard” icon for identifying geotagged content to humans. by GeotagIcons.com
icon-opensearch OpenSearch is a collection of simple formats for the sharing of search results. by OpenSearch.org
icon-oauth An open protocol to allow secure API authorization in a simple and standard method from desktop and web applications.
icon-openid OpenID is a safe, faster, and easier way to log in to web sites. by OpenID
icon-rdf RDF is a standard model for data interchange on the Web. RDF has features that facilitate data merging even if the underlying schemas differ, and it specifically supports the evolution of schemas over time without requiring all the data consumers to be changed. by W3C
icon-json-ld JSON-LD is a lightweight Linked Data format. It is based on the already successful JSON format and provides a way to help JSON data interoperate at Web-scale. by JSON-LD
icon-semantic-web In addition to the classic “Web of documents” W3C is helping to build a technology stack to support a “Web of data,” the sort of data you find in databases. The ultimate goal of the Web of data is to enable computers to do more useful work and to develop systems that can support trusted interactions over the network. The term "Semantic Web" refers to W3C’s vision of the Web of linked data. by W3C
icon-dataportability Data portability is the ability for people to reuse their data across interoperable applications. The DataPortability Project works to advance this vision by identifying, contextualizing and promoting efforts in the space. a TM of the DataPortability Organisation
Icon class-name About Icon Sources
icon-federated To collaborate and build the future of the Internet together via the federated social web with OStatus and other open web technologies. by Status.net
icon-open-web The Open Web Foundation is an independent non-profit dedicated to the development and protection of open, non-proprietary specifications for web technologies. by the Open Web Foundation
icon-web-intents Web Intents is a framework for client-side service discovery and inter-application communication. Web Intents puts the user in control of service integrations and makes the developer's life simple. by Paul Lewis
icon-xmpp The Extensible Messaging and Presence Protocol (XMPP) is an open technology for real-time communication, which powers a wide range of applications including instant messaging, presence, multi-party chat, voice and video calls, collaboration, lightweight middleware, content syndication, and generalized routing of XML data. by XMPP
icon-qr The QR code was a kind of two dimensional symbology [...] The QR code is that carry meaningful information in the vertical direction as well as the horizontal, hence the two-dimensional term.
icon-epub The EPUB® specification is a distribution and interchange format standard for digital publications and documents. EPUB defines a means of representing, packaging and encoding structured and semantically enhanced Web content — including HTML5, CSS, SVG, images, and other resources — for distribution in a single-file format. by ePub
icon-opengraph The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. by Open Graph protocol
icon-foaf The Friend of a Friend (FOAF) project is creating a Web of machine-readable pages describing people, the links between them and the things they create and do; it is a contribution to the linked information system known as the Web. by FOAF
icon-info-card Information Cards are the digital version of the cards you carry in your purse or wallet today. You use them with a new kind of digital wallet called a selector. by Mike Jones
icon-browserid BrowserID is an easy way to sign into websites. Instead of making up a hard-to-remember username and password for each site, BrowserID lets you use your email address and a single password to sign in to any site that supports it. by Mozilla
Icon class-name About Icon Sources
icon-persona Persona allows you to sign in to sites using an email address you choose. So, instead of having to manage multiple usernames and passwords across your favorite sites and devices, you’ll have more time to do the important stuff. We’ll manage the details! by Mozilla
icon-remote-storage Adding WebFinger, OAuth and Cross-Origin Resource Sharing (CORS) to an online storage makes it usable as per-user storage for web apps. The remoteStorage specification describes a common interface for such a per-user online data storage. by Unhosted
icon-odata The Open Data Protocol (OData) is a Web protocol for querying and updating data that provides a way to unlock your data and free it from silos that exist in applications today. by OData
icon-markdown Use this mark to identify Markdown. It should be used to identify user input areas which support Markdown-compiled HTML output or to identify general Markdown support. by Dustin Curtis
icon-tosdr Terms of Service; Didn't read! "I have read and agree to the Terms" is the biggest lie on the web. We aim to fix that. We are a user rights initiative to rate and label website terms & privacy policies, from very good "Class A" to very bad "Class E" by Terms of Service; Didn't Read
icon-indieweb Rather than posting content on third-party silos of content, we should all own the content we're creating. Publish on your own domain, and syndicate out to silos. This is the basis of the "Indie Web" movement. by IndieWebCamp
icon-indiewebcamp IndieWebCamp is a regular gathering of web creators building and sharing open web technologies to advance the state of the indie web, and empower users to own their own identities & content on the web. by IndieWebCamp
icon-git Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. by Git SCM
icon-webhooks A WebHook is an HTTP callback: an HTTP POST that occurs when something happens; a simple event-notification via HTTP POST. by webhooks.org
icon-osi The Open Source Initiative (OSI) is a non-profit corporation with global scope formed to educate about, and advocate, for the benefits of open source, and to build bridges among different constituencies in the open source community. by OSI
Icon class-name About Icon Sources
icon-webfinger WebFinger is used to discover information about people or other entities on the Internet that are identified by a URI or IRI using standard Hypertext Transfer Protocol (HTTP) methods over a secure transport. by Eran Hammer
icon-bitcoin Bitcoin is a digital currency, a protocol, and a software that enables Instant peer-to-peer transactions, worldwide payments, almost no processing fees, and much more. by bitcoin
icon-bitcoin-simple
icon-pubsubhubbub PubSubHubbub is a simple, open, server-to-server webhook-based pubsub (publish/subscribe) protocol for any web accessible resources. by PubSubHubbub
icon-svg SVG is a language for describing two-dimensional graphics in XML. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. by W3C
icon-tent Tent is a communications protocol. It lets users store any kind of data and send that data to other users in real time. Just like other protocol-based services like email or the web, anyone can host their own server or write apps. Also like email, users can host their own Tent server or use a Tent hosting provider. by Tent.io
icon-copyleft Copyleft is a general method for making a program (or other work) free, and requiring all modified and extended versions of the program to be free as well. by Wikipedia
icon-gnu GNU is a Unix-like operating system that is free software—it respects your freedom. You can install versions of GNU (more precisely, GNU/Linux systems) which are entirely free software. by GNU

Did I forgot an icon? Please let me know!

HTML5 Icons

The Web-Font is based on the original SVGs from the HTML5 Logo Site by the W3C.

Icon class-name About
icon-html5 HTML5 contains powerful capabilities for Web-based applications with more powerful interaction, video support, graphics, more styling effects, and a full set of APIs. HTML5 adapts to any device, whether desktop, mobile, tablet, or television. HTML5 is an open platform developed under royalty free licensing terms.
icon-css3 CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1 specification as its core. Each module adds functionality and/or replaces part of the CSS2.1 specification. The CSS Working Group intends that the new CSS modules will not contradict the CSS2.1 specification: only that they will add functionality and refine definitions.
icon-connectivity More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before. This icon can also be used for Web Intents or XAuth.
icon-semantics Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.
icon-device-access Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.
icon-offline-storage Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
icon-multimedia Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!
icon-3deffects Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.
icon-perfintegration Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.

This work is attributed to the W3C. Suggested markup: <span>HTML5 Logo by <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a></span>.

Creative Commons Icons

The Web-Font is made using the original SVGs from the Creative Commons Project. If you need a Font for one of your Text/Word-Dokuments, there is also an official TrueType-Font: http://creativecommons.org/about/downloads

Icon class-name About
icon-cc Creative Commons is a nonprofit organization that enables the sharing and use of creativity and knowledge through free legal tools.
icon-cc-by Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
icon-cc-nc Noncommercial — You may not use this work for commercial purposes.
icon-cc-nc-eu
icon-cc-nc-jp
icon-cc-sa Share Alike — If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.
icon-cc-nd No Derivative Works — You may not alter, transform, or build upon this work.
icon-cc-public Public Domain — Where the work or any of its elements is in the public domain under applicable law, that status is in no way affected by the license.
icon-cc-zero CC0 enables scientists, educators, artists and other creators and owners of copyright- or database-protected content to waive those interests in their works and thereby place them as completely as possible in the public domain, so that others may freely build upon, enhance and reuse the works for any purposes without restriction under copyright or database law.
icon-cc-share to Share — to copy, distribute and transmit the work
icon-cc-remix to Remix — to adapt the work

From the Creative Commons Policy:

Creative Commons License Buttons: The Creative Commons buttons that describe a key term of our license, such as BY, NC, ND, SA, Sampling, Sampling Plus and Noncommercial Sampling Plus may only be used in the context of pointing to a Creative Commons license on the Creative Commons server that includes that license term or to otherwise describe the Creative Commons license, that includes that license term and that applies to a particular work.

Microformats Icons

The microformats-icons are based on the work of Wolfgang Bartelme and Chris Messina. You can find the .png files on the microformats-wiki.

Icon class-name About
icon-microformats microformats are extensions to HTML for marking up people, events, blog posts, reviews, recipes etc.
icon-hcard-download hCard is a simple, open format for publishing people, companies, organizations on the web, using a 1:1 representation of vCard (RFC2426) properties and values in HTML. hCard is one of several open microformat standards suitable for embedding data in HTML/HTML5, and Atom/RSS/XHTML or other XML.
icon-hcard-add
icon-hresume The hResume format is based on a set of fields common to numerous resumes published today on the web. Where possible field names have been chosen and reused from preexisting microformats.
icon-hatom hAtom is a microformat for identifying semantic information in weblog posts and practically any other place Atom may be used, such as news articles.

SIL Open Font License - Icons

The SIL Open Font License (OFL) is a free, libre and open source license specifically designed for fonts and related software based on our experience in font design and linguistic software engineering.

The Web-Font is made using the SVGs from the Open Font Community.

Icon class-name About
icon-ofl-attribution The requirement is for proper attribution of the author(s): name(s) and notice(s) must be preserved and abuse of the name(s) and reputation of the author(s) is forbidden.
icon-ofl-share The requirement is for derivative works to remain under the same license to encourage fair collaboration and prevent anyone from locking away contributions.
icon-ofl-embedding The permission is for fonts to be embedded in any kind of document. This does not affect the licensing status of the document but makes it easier for documents to be used in different environments.
icon-ofl-renaming The requirement is for derivative fonts to be renamed to allow branching while retaining artistic integrity.
icon-ofl-selling The requirement is for fonts to be bundled with software when they are sold. Fonts cannot be sold on their own. Redistribution without selling is not restricted.

The spirit and working model of the OFL can be expressed in human-readable Creative Commons-like terminology using the following permits / requires elements and visual representations:

Please note that this terminology and visual representation is simply an expression of the working model of the license and has no legal value in itself. It is designed to help you understand and use the Open Font License in a similar way to the OFL FAQ. It is always intended to link back to the full license text of the OFL. Please note that although the terminology and visual representation of the OFL is based on work by Creative Commons, the OFL is not officially affiliated with Creative Commons.

Source: SIL Open Font License (OFL).

Colored Icons

A lot of icons also have colored versions. You can use them by adding a -colored at the end of the class names.

  • icon-apml-colored
  • icon-open-share-colored
  • icon-share-colored
  • icon-epub-colored
  • icon-microformats-colored
  • icon-feed-colored
  • icon-ostatus-colored
  • icon-remote-storage-colored
  • icon-odata-colored
  • icon-git-colored
  • icon-activity-colored
  • icon-opml-colored
  • icon-opensearch-colored
  • icon-osi-colored
  • icon-geo-colored
  • icon-info-card-colored
  • icon-html5-colored

PubSubHubbub Icon

Use the following HTML Code: <i class="icon-pub-colored"></i><i class="icon-sub-colored"></i><i class="icon-hubbub-colored"></i> to display the colored PubSubHubbub-Icon: (Let me know if you have some ideas to make this simpler)

Examples

Many examples re-used from the Twitter Bootstrap documentation.

Please subscribe us:

  • OPML List
  • RSS-Feed
  • ATOM-Feed
  • ActivityStream

Login Subscribe Follow

Share Share Edit

Read Save to Phone Fork me!

HTML Powered with CSS / Styling

This file is licensed under the 3.0

  • Login with your Info-Card
  • Login with BrowserID
× Is Twitter allowed to access your location?

Integration

It's easy to combine the OpenWeb Icons Font with Twitters Bootstrap, or even use it as "standalone".


Custom CSS

Add OpenWeb Icons support to one of your CSS files

  1. Copy the OpenWeb Icons font directory into your project.
  2. Open your project's css file and add the following code to the top.
    @font-face {
      font-family: 'OpenWeb Icons';
        src: url('../font/openwebicons.eot');
        src: url('../font/openwebicons.eot?#iefix') format('embedded-opentype'),
             url('../font/openwebicons.woff') format('woff'),
             url('../font/openwebicons.ttf') format('truetype'),
             url('../font/openwebicons.svg#OpenWebIconsRegular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
  3. Now you can mark up your code like that <i style="font-family: 'OpenWeb Icons'">&#xf008;</i> (OAuth Icon)

We Love Icon Fonts

weloveiconfonts.com "is a free & open source icon-fonts hosting service (like Google Web Fonts, but icon fonts only)" by Tim Pietrusky

The "We Love Icon Fonts"-Webservice is a simple and easy way to use the OpenWeb-Icons in your Web-Project. You don't have to provide a copy of all the css and font files, simply add the following code to the top of your main CSS-file and that's it!
@import url(http://weloveiconfonts.com/api/?family=openwebicons);

/* openwebicons */
[class*="openwebicons-"]:before {
  font-family: 'OpenWeb Icons', sans-serif;
}
Be sure to use openwebicons- instead of icons-. To display the RSS-icon, use <i class="openwebicons-feed"></i> for example.

Together with Bootstrap or/and Font Awesome

Use this method if you want to use the OpenWeb-Icons with Twitters Bootstrap or Font Awesome.

  1. Copy the OpenWeb Icons font directory into your project.
  2. Copy openwebicons-bootstrap.css into your project.
  3. Open your project's openwebicons-bootstrap.css and edit the font url to ensure it points to the right place (see above example).
  4. In the <head> of your html, reference the location to your openwebicons-bootstrap.css.
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <link rel="stylesheet" href="../css/openwebicons-bootstrap.css" />

Not using Bootstrap or Font Awesome

OpenWeb Icons works with any CSS.

  1. Copy the OpenWeb Icons font directory into your project.
  2. Copy openwebicons.css into your project.
  3. Open your project's openwebicons.css and edit the font url to ensure it points to the right place (see above example).

Code

soon...

Changelog

  • 2013-12-16: Added Copyleft und GNU icons
  • 2013-10-29: Added SIL OFL icons
  • 2013-08-22: And added Tent icon
  • 2013-08-14: Optimized Webfinger icon and added JSON-LD and SVG icon
  • 2013-08-06: Added PubSubHubbub icon
  • 2013-07-16: Added Bitcoin icon
  • 2013-06-29: Added Webfinger icon
  • 2013-03-20: Added Open Source Initiative and RDF icons
  • 2013-03-19: More HTML5 icons, the git icon and the webhooks icon
  • 2013-02-17: IndieWebIcons icons
  • 2013-01-30: Microformats icons
  • 2012-10-03: Added markdown and ToS;DR icon
  • 2012-09-29: Added OData icon and made a nicer DataPortability icon
  • 2012-09-28: Added Persona icon, resized "simple" icons and fixed some page issues
  • 2012-06-09: Changed the FOAF and QR-Code icon
  • 2012-06-09: Added Information-Card and BrowserID icon
  • 2012-06-04: Added ePub, QR-Code, FOAF and OpenGraph icon
  • 2012-05-30: Added semantics and connectivity icon
  • 2012-05-29: Added XMPP, HTML5 and CSS3 icon
  • 2012-05-29: Changed from letters to the private unicode range
  • 2012-05-23: Added Web Intents Icon
  • 2012-05-05: Added federated social web, DataPortability and Open Web Foundation Icon
  • 2012-05-03: Initial Release