70+ Pure CSS Icons For The Web – PureIcons.css

Preview:

Description:

A set of 79 pure CSS icons for web, mobile, UI/UX design.

Icons Included:

• 24 arrow icons: up, down, …
• 13 shapes: circle, square, rhombus, …
• 16 special characters
• 4 world icons
• 10 media icons
• And 12 miscellaneous icons

How to use it:

1. Download and include the PureIcons.css on the page.

<link rel="stylesheet" href="src/pureicons.css" />

2. Add arrow icons to the page.

<div class="ib-arrow-top-left"></div>
<div class="ib-arrow-top-right"></div>
<div class="ib-arrow-bottom-left"></div>
<div class="ib-arrow-bottom-right"></div>
<div class="ib-arrow-top-left-small"></div>
<div class="ib-arrow-top-right-small"></div>
<div class="ib-arrow-bottom-left-small"></div>
<div class="ib-arrow-bottom-right-small"></div>
<div class="ib-arrow-up-full"></div>
<div class="ib-arrow-down-full"></div>
<div class="ib-arrow-left-full"></div>
<div class="ib-arrow-right-full"></div>
<div class="ib-arrow-left-full-line"></div>
<div class="ib-arrow-right-full-line"></div>
<div class="ib-arrow-up-full-line"></div>
<div class="ib-arrow-down-full-line"></div>
<div class="ib-arrow-up"></div>
<div class="ib-arrow-down"></div>
<div class="ib-arrow-left"></div>
<div class="ib-arrow-right"></div>
<div class="ib-arrow-expand-left-right"></div>
<div class="ib-arrow-expand-right-left"></div>
<div class="ib-arrow-contract-left-right"></div>
<div class="ib-arrow-contract-right-left"></div>

3. Add shapes to the page.

<div class="ib-circle"></div>
<div class="ib-circle-hollow"></div>
<div class="ib-circle-dot"></div>
<div class="ib-circle-stop"></div>
<div class="ib-square"></div>
<div class="ib-square-hollow"></div>
<div class="ib-square-dot"></div>
<div class="ib-square-four"></div>
<div class="ib-rhombus"></div>
<div class="ib-rhombus-hollow"></div>
<div class="ib-octagon"></div>
<div class="ib-octagon-hollow"></div>
<div class="ib-trapezoid"></div>

4. Add special characters: to the page.

<div class="ib-plus"></div>
<div class="ib-exclamation-mark"></div>
<div class="ib-minus"></div>
<div class="ib-underscore"></div>
<div class="ib-pipe"></div>
<div class="ib-equals"></div>
<div class="ib-full-stop"></div>
<div class="ib-square-bracket-left"></div>
<div class="ib-square-bracket-right"></div>
<div class="ib-colon"></div>
<div class="ib-hash"></div>
<div class="ib-quote"></div>
<div class="ib-speech-mark"></div>
<div class="ib-not"></div>
<div class="ib-back-slash"></div>
<div class="ib-forward-slash"></div>

5. Add world icons to the page.

<div class="ib-crescent-left"></div>
<div class="ib-crescent-right"></div>
<div class="ib-crescent-up"></div>
<div class="ib-crescent-down"></div>

6. Add media icons to the page.

<div class="ib-pause"></div>
<div class="ib-folder"></div>
<div class="ib-eject"></div>
<div class="ib-previous"></div>
<div class="ib-next"></div>
<div class="ib-first"></div>
<div class="ib-last"></div>
<div class="ib-rewind"></div>
<div class="ib-forward"></div>
<div class="ib-play-pause"></div>

7. Miscellaneous icons.

<div class="ib-pin"></div>
<div class="ib-refresh"></div>
<div class="ib-hamburger"></div>
<div class="ib-dot"></div>
<div class="ib-eye"></div>
<div class="ib-eye-side"></div>
<div class="ib-hourglass"></div>
<div class="ib-close"></div>
<div class="ib-bar-graph"></div>
<div class="ib-expand"></div>
<div class="ib-search"></div>
<div class="ib-wi-fi"></div>