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-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-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-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-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

Did I forgot an icon? Please let me know!

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>.

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.

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.

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

Many examples re-used from the Twitter Bootstrap documentation.

Login Subscribe Follow

Share Share Edit

Read Save to Phone Fork me!

• Login with your Info-Card
• Login with BrowserID

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).

soon...