orion-font Icon Font | Orion Icon Library

Icon Font generated by Orion Icon Library

Let's use your Icon Font!

Congratulations, your Icon Font orion-font from Orion Icon Library was created successfully!
In the downloaded folder, you will find the file called iconfont.css [Open] and the font files called orion-font.* in eot, svg, ttf, woff and woff2 formats.

Include Styles

Place the file iconfont.css in the same folder of the five font files and include the css in your html.

<link href="path/to/iconfont.css" rel="stylesheet"/>

Otherwise include the snippet below in your own stylesheet, paying attention to point the font files url("./orion-font.*") to the right location.

@font-face {
  font-family: "orion-font";
  src: url("./orion-font.eot");
  src: url("./orion-font.eot?#iefix") format("embedded-opentype"),
       url("./orion-font.woff2") format("woff2"),
       url("./orion-font.woff") format("woff"),
       url("./orion-font.ttf") format("truetype"),
       url("./orion-font.svg#orion-font") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "orion-font";
    src: url("./orion-font.svg#orion-font") format("svg");
  }
}
[data-icon]::before { content: attr(data-icon); }

[data-icon]::before,
.o-app-layout-1::before,
.o-archive-1::before,
.o-archive-folder-1::before,
.o-bookmark-archive-1::before,
.o-cd-1::before,
.o-clock-1::before,
.o-code-window-1::before,
.o-computer-display-1::before,
.o-contact-card-1::before,
.o-data-storage-1::before,
.o-database-1::before,
.o-diploma-1::before,
.o-document-1::before,
.o-earth-globe-1::before,
.o-exit-1::before,
.o-home-1::before,
.o-id-card-1::before,
.o-imac-screen-1::before,
.o-ipad-1::before,
.o-laptop-screen-1::before,
.o-letter-1::before,
.o-like-hand-1::before,
.o-medical-chart-1::before,
.o-mouse-1::before,
.o-network-1::before,
.o-news-article-1::before,
.o-paper-stack-1::before,
.o-paperwork-1::before,
.o-presentation-1::before,
.o-profile-1::before,
.o-repository-1::before,
.o-sales-up-1::before,
.o-search-magnify-1::before,
.o-settings-window-1::before,
.o-stack-1::before,
.o-statistic-1::before,
.o-survey-1::before,
.o-table-content-1::before,
.o-timing-1::before,
.o-trophy-1::before,
.o-user-1::before,
.o-user-details-1::before,
.o-wifi-router-1::before,
.o-wireframe-1::before {
  display: inline-block;
  font-family: "orion-font";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.o-app-layout-1::before { content: "\f300"; }
.o-archive-1::before { content: "\f301"; }
.o-archive-folder-1::before { content: "\f302"; }
.o-bookmark-archive-1::before { content: "\f303"; }
.o-cd-1::before { content: "\f304"; }
.o-clock-1::before { content: "\f305"; }
.o-code-window-1::before { content: "\f306"; }
.o-computer-display-1::before { content: "\f307"; }
.o-contact-card-1::before { content: "\f2c3"; }
.o-data-storage-1::before { content: "\f308"; }
.o-database-1::before { content: "\f309"; }
.o-diploma-1::before { content: "\f2c7"; }
.o-document-1::before { content: "\f30a"; }
.o-earth-globe-1::before { content: "\f30b"; }
.o-exit-1::before { content: "\f30c"; }
.o-home-1::before { content: "\f2ce"; }
.o-id-card-1::before { content: "\f2d2"; }
.o-imac-screen-1::before { content: "\f30d"; }
.o-ipad-1::before { content: "\f30e"; }
.o-laptop-screen-1::before { content: "\f30f"; }
.o-letter-1::before { content: "\f310"; }
.o-like-hand-1::before { content: "\f2d4"; }
.o-medical-chart-1::before { content: "\f311"; }
.o-mouse-1::before { content: "\f312"; }
.o-network-1::before { content: "\f313"; }
.o-news-article-1::before { content: "\f314"; }
.o-paper-stack-1::before { content: "\f315"; }
.o-paperwork-1::before { content: "\f316"; }
.o-presentation-1::before { content: "\f317"; }
.o-profile-1::before { content: "\f318"; }
.o-repository-1::before { content: "\f319"; }
.o-sales-up-1::before { content: "\f2e9"; }
.o-search-magnify-1::before { content: "\f323"; }
.o-settings-window-1::before { content: "\f31a"; }
.o-stack-1::before { content: "\f2f6"; }
.o-statistic-1::before { content: "\f31b"; }
.o-survey-1::before { content: "\f31c"; }
.o-table-content-1::before { content: "\f31d"; }
.o-timing-1::before { content: "\f2f9"; }
.o-trophy-1::before { content: "\f31e"; }
.o-user-1::before { content: "\f31f"; }
.o-user-details-1::before { content: "\f320"; }
.o-wifi-router-1::before { content: "\f321"; }
.o-wireframe-1::before { content: "\f322"; }

Icons reference

Once you include the styles, select the Icons you need below to copy the class or the codepoint and paste it in your Project.
Preview size:

```
o-app-layout-1
```
```
&#xf300;
```
```
f300
```
```
o-archive-1
```
```
&#xf301;
```
```
f301
```
```
o-archive-folder-1
```
```
&#xf302;
```
```
f302
```
```
o-bookmark-archive-1
```
```
&#xf303;
```
```
f303
```
```
o-cd-1
```
```
&#xf304;
```
```
f304
```
```
o-clock-1
```
```
&#xf305;
```
```
f305
```
```
o-code-window-1
```
```
&#xf306;
```
```
f306
```
```
o-computer-display-1
```
```
&#xf307;
```
```
f307
```
```
o-contact-card-1
```
```
&#xf2c3;
```
```
f2c3
```
```
o-data-storage-1
```
```
&#xf308;
```
```
f308
```
```
o-database-1
```
```
&#xf309;
```
```
f309
```
```
o-diploma-1
```
```
&#xf2c7;
```
```
f2c7
```
```
o-document-1
```
```
&#xf30a;
```
```
f30a
```
```
o-earth-globe-1
```
```
&#xf30b;
```
```
f30b
```
```
o-exit-1
```
```
&#xf30c;
```
```
f30c
```
```
o-home-1
```
```
&#xf2ce;
```
```
f2ce
```
```
o-id-card-1
```
```
&#xf2d2;
```
```
f2d2
```
```
o-imac-screen-1
```
```
&#xf30d;
```
```
f30d
```
```
o-ipad-1
```
```
&#xf30e;
```
```
f30e
```
```
o-laptop-screen-1
```
```
&#xf30f;
```
```
f30f
```
```
o-letter-1
```
```
&#xf310;
```
```
f310
```
```
o-like-hand-1
```
```
&#xf2d4;
```
```
f2d4
```
```
o-medical-chart-1
```
```
&#xf311;
```
```
f311
```
```
o-mouse-1
```
```
&#xf312;
```
```
f312
```
```
o-network-1
```
```
&#xf313;
```
```
f313
```
```
o-news-article-1
```
```
&#xf314;
```
```
f314
```
```
o-paper-stack-1
```
```
&#xf315;
```
```
f315
```
```
o-paperwork-1
```
```
&#xf316;
```
```
f316
```
```
o-presentation-1
```
```
&#xf317;
```
```
f317
```
```
o-profile-1
```
```
&#xf318;
```
```
f318
```
```
o-repository-1
```
```
&#xf319;
```
```
f319
```
```
o-sales-up-1
```
```
&#xf2e9;
```
```
f2e9
```
```
o-search-magnify-1
```
```
&#xf323;
```
```
f323
```
```
o-settings-window-1
```
```
&#xf31a;
```
```
f31a
```
```
o-stack-1
```
```
&#xf2f6;
```
```
f2f6
```
```
o-statistic-1
```
```
&#xf31b;
```
```
f31b
```
```
o-survey-1
```
```
&#xf31c;
```
```
f31c
```
```
o-table-content-1
```
```
&#xf31d;
```
```
f31d
```
```
o-timing-1
```
```
&#xf2f9;
```
```
f2f9
```
```
o-trophy-1
```
```
&#xf31e;
```
```
f31e
```
```
o-user-1
```
```
&#xf31f;
```
```
f31f
```
```
o-user-details-1
```
```
&#xf320;
```
```
f320
```
```
o-wifi-router-1
```
```
&#xf321;
```
```
f321
```
```
o-wireframe-1
```
```
&#xf322;
```
```
f322
```

Usage

There are two ways to include the icons in the html, using class or data-icon attribute.

<span class="o-app-layout-1"></span>
<!-- or -->
<span data-icon="&#xf300;"></span>

<span class="o-archive-1"></span>
<!-- or -->
<span data-icon="&#xf301;"></span>

<span class="o-archive-folder-1"></span>
<!-- or -->
<span data-icon="&#xf302;"></span>

<span class="o-bookmark-archive-1"></span>
<!-- or -->
<span data-icon="&#xf303;"></span>

<span class="o-cd-1"></span>
<!-- or -->
<span data-icon="&#xf304;"></span>

<span class="o-clock-1"></span>
<!-- or -->
<span data-icon="&#xf305;"></span>

<span class="o-code-window-1"></span>
<!-- or -->
<span data-icon="&#xf306;"></span>

<span class="o-computer-display-1"></span>
<!-- or -->
<span data-icon="&#xf307;"></span>

<span class="o-contact-card-1"></span>
<!-- or -->
<span data-icon="&#xf2c3;"></span>

<span class="o-data-storage-1"></span>
<!-- or -->
<span data-icon="&#xf308;"></span>

<span class="o-database-1"></span>
<!-- or -->
<span data-icon="&#xf309;"></span>

<span class="o-diploma-1"></span>
<!-- or -->
<span data-icon="&#xf2c7;"></span>

<span class="o-document-1"></span>
<!-- or -->
<span data-icon="&#xf30a;"></span>

<span class="o-earth-globe-1"></span>
<!-- or -->
<span data-icon="&#xf30b;"></span>

<span class="o-exit-1"></span>
<!-- or -->
<span data-icon="&#xf30c;"></span>

<span class="o-home-1"></span>
<!-- or -->
<span data-icon="&#xf2ce;"></span>

<span class="o-id-card-1"></span>
<!-- or -->
<span data-icon="&#xf2d2;"></span>

<span class="o-imac-screen-1"></span>
<!-- or -->
<span data-icon="&#xf30d;"></span>

<span class="o-ipad-1"></span>
<!-- or -->
<span data-icon="&#xf30e;"></span>

<span class="o-laptop-screen-1"></span>
<!-- or -->
<span data-icon="&#xf30f;"></span>

<span class="o-letter-1"></span>
<!-- or -->
<span data-icon="&#xf310;"></span>

<span class="o-like-hand-1"></span>
<!-- or -->
<span data-icon="&#xf2d4;"></span>

<span class="o-medical-chart-1"></span>
<!-- or -->
<span data-icon="&#xf311;"></span>

<span class="o-mouse-1"></span>
<!-- or -->
<span data-icon="&#xf312;"></span>

<span class="o-network-1"></span>
<!-- or -->
<span data-icon="&#xf313;"></span>

<span class="o-news-article-1"></span>
<!-- or -->
<span data-icon="&#xf314;"></span>

<span class="o-paper-stack-1"></span>
<!-- or -->
<span data-icon="&#xf315;"></span>

<span class="o-paperwork-1"></span>
<!-- or -->
<span data-icon="&#xf316;"></span>

<span class="o-presentation-1"></span>
<!-- or -->
<span data-icon="&#xf317;"></span>

<span class="o-profile-1"></span>
<!-- or -->
<span data-icon="&#xf318;"></span>

<span class="o-repository-1"></span>
<!-- or -->
<span data-icon="&#xf319;"></span>

<span class="o-sales-up-1"></span>
<!-- or -->
<span data-icon="&#xf2e9;"></span>

<span class="o-search-magnify-1"></span>
<!-- or -->
<span data-icon="&#xf323;"></span>

<span class="o-settings-window-1"></span>
<!-- or -->
<span data-icon="&#xf31a;"></span>

<span class="o-stack-1"></span>
<!-- or -->
<span data-icon="&#xf2f6;"></span>

<span class="o-statistic-1"></span>
<!-- or -->
<span data-icon="&#xf31b;"></span>

<span class="o-survey-1"></span>
<!-- or -->
<span data-icon="&#xf31c;"></span>

<span class="o-table-content-1"></span>
<!-- or -->
<span data-icon="&#xf31d;"></span>

<span class="o-timing-1"></span>
<!-- or -->
<span data-icon="&#xf2f9;"></span>

<span class="o-trophy-1"></span>
<!-- or -->
<span data-icon="&#xf31e;"></span>

<span class="o-user-1"></span>
<!-- or -->
<span data-icon="&#xf31f;"></span>

<span class="o-user-details-1"></span>
<!-- or -->
<span data-icon="&#xf320;"></span>

<span class="o-wifi-router-1"></span>
<!-- or -->
<span data-icon="&#xf321;"></span>

<span class="o-wireframe-1"></span>
<!-- or -->
<span data-icon="&#xf322;"></span>

You can also use the Icon Font in desktop applications installing the .ttf font on your system. Then copy the unicode character (last row) from the Icons reference and paste it in your application program.