A Library of 75+ Icons Provided in CSS Only

PureIcons.css is a library of icons shown in CSS only and compiled with SASSs. It is currently in 75+ icons. More will be added as we go forward.

To get started, download the source code and run the “index.html” file. This will show all available icons. All CSS compiled from SASS are in “src / pureicons.scss“.

If you want to change the size of the icons, go to “src / _foundation / _styles.css” and change the “$ size” variable. Remember to go up / down the usual symbol sizes (8, 16, 32, 64, etc.).

Icons included:

24 Arrow Symbol: Up, Down, …
13 shapes: round, square, rhombus, …
16 special characters
4 world symbols
10 media icons
And 12 miscellaneous icons

How to make use of it:

1. Download and embrace the PureIcons.css on the web page.

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

2. Add arrow icons to the web 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 web 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 particular characters: to the web 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 web 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 web 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>

Pure CSS Icons For The Web, PureIcons.css Plugin/Github