Author: | williamtroup |
---|---|
Views Total: | 355 views |
Official Page: | Go to website |
Last Update: | March 12, 2021 |
License: | MIT |
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>