A Library of 75+ Icons Provided in CSS Only | PureIcons.css

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


See Demo And Download

Official Website(williamtroup): Click Here

This superior jQuery/javascript plugin is developed by williamtroup. For extra Advanced Usages, please go to the official website.

Related Posts


Responsive FAQ Accordion Dropdown In HTML and CSS

How to create responsive accordion Expandable and Collapsible Frequently Asked Questions Elements. Accordion HTML, is an easy and seamless accordion FAQ component built with CSS and HTML…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…


How to Add Emoji Button In Vanilla JavaScript | emoji-picker

Vanilla Emoji Picker – The Emoji button (PicMo) allows you to add the emoji picker to your website or app with a few simple lines of code. It…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


Simple Popup Box In Vanilla JavaScript | Creativa – Popup

Vanilla JS Popup is a simple library that allows you to create great popups for importing just one JavaScript file. Creativa is a lightweight, easy-to-use, customizable, responsive popup…

Leave a Reply

Your email address will not be published. Required fields are marked *