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

Category: CSS & CSS3 | March 12, 2021
Author:williamtroup
Views Total:355 views
Official Page:Go to website
Last Update:March 12, 2021
License:MIT

Preview:

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

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.

PureIcons.css Arrows

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

PureIcons.css Shapes

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

PureIcons.css Characters

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

PureIcons.css World Icons

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

PureIcons.css Media Icons

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

PureIcons.css Misc 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>

You Might Be Interested In:


Leave a Reply