A library of icons rendered purely in CSS and compiled using SASS.

Related tags

Learning resource css sass icons
Overview

Welcome to PureIcons.css:

This is a library of icons rendered purely in CSS and compiled using SASSs.

It is currently at 79 icons. More will be added as we go along.

To get started, download the source code and run the "index.html" file. This will see all of the icons available.

All of the CSS compiled from the SASS is in "src/pureicons.scss".

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

You might also like...

iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.

iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.

Intro iHover is a collection of hover effects using pure CSS, inspired by this codrops article, powered by Sass. Demo: https://gudh.github.io/ihover/d

Jan 4, 2023

Basic styling to create calendar icons with pure HTML and CSS

Calendar Icon Basic styling to create calendar icons with pure HTML and CSS Usage Embed the CSS, and markup your date: link type="text/css" rel="styl

Aug 23, 2022

A Technical Blogging Website that utilizes Notion as a CMS for ease of modification with the help of the notion-API & whose content has been rendered with next-js and react-notion-x

A Technical Blogging Website that utilizes Notion as a CMS for ease of modification with the help of the notion-API & whose content has been rendered with next-js and react-notion-x

GDSC MCE Blogs This repo is what GDSC MCE uses to power their blogging website gdsc-mce-blogs. It uses Notion as a CMS, fetching content from Notion a

Dec 16, 2022

CSS sprite to represent iOS shortcut icons

shortcut-icons A CSS sprite to represent iOS shortcut icons. Grab the stylesheet and the default (iOS 15) glyph set, and add a shortcut icon to your H

Nov 14, 2022

Pure CSS icons for popular file extensions

Pure CSS icons for popular file extensions

CSS file icons Pure CSS file icons for popular extensions lightweight css library Icons Demo Usage Include css-file-icons.css to html or install via n

Dec 6, 2022

Clone of the Fallout hacking mini-game, rendered into a browser canvas.

Clone of the Fallout hacking mini-game, rendered into a browser canvas.

kodenkel-fo-hacking Clone of the Fallout hacking mini-game, rendered into a browser canvas. You can try it out at: https://www.kodenkel.com/games/fo-h

Dec 19, 2022

💅 A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, Prettier, GitHub Action releases and more.

💅 A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, Prettier, GitHub Action releases and more.

Electron App 💅  A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, P

Dec 29, 2022

:iphone: A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites

Responsive Boilerplate A powerful, accessible, developer friendly, framework for building responsive websites Responsive Boilerplate is the developers

Dec 22, 2022

🍱 Simple nodejs support for using icons!

🍱 node-icons Usage Checkout its unit tests to see complete usage with output! import Icons from "node-icons"; const icons = Icons({ // auto install

Dec 29, 2021
Releases(0.3.0)

  • 0.3.0(Mar 2, 2021)

    • Added Arrow - Arrow-Top-Left-Small.
    • Added Arrow - Arrow-Top-Right-Small.
    • Added Arrow - Arrow-Bottom-Left-Small.
    • Added Arrow - Arrow-Bottom-Right-Small.
    • Added Character - Not.
    • All buttons now set the positions correctly in :before and :after selectors.
    • Added Arrow - Arrow-Up.
    • Added Arrow - Arrow-Down.
    • Added Arrow - Arrow-Left.
    • Added Arrow - Arrow-Right.
    • Added Other - Expand.
    • Added Other - Search.
    • Added more browser support for transforms.
    • Added Character - Back-Slash.
    • Added Character - Forward-Slash.
    • Improved the testing "index.html" file.
    • Added Other - Wi-Fi.
    • Added Shape - Square-Four.
    • Added Arrow - Expand-Left-Right.
    • Added Arrow - Expand-Right-Left.
    • Added Arrow - Contract-Left-Right.
    • Added Arrow - Contract-Right-Left.
    • Added Other - Eye-Side.
    • Added Shape - Circle-Stop.
    • Border size changes will now allow icons to size correctly.
    Source code(tar.gz)
    Source code(zip)

  • 0.2.0(Feb 28, 2021)

    • Added Other - Hourglass.
    • Added Character - Quote.
    • Added Character - Speech Mark.
    • Added Media - Play-Pause.
    • Added Arrow - Left-Full-Line.
    • Added Arrow - Right-Full-Line.
    • Added Arrow - Up-Full-Line.
    • Added Arrow - Down-Full-Line.
    • Added Other - Close.
    • Added border-radius variable support to more icons.
    • Added Shape - Square-Dot.
    • Added Shape - Circle-Dot.
    • Added Other - Bar-Graph.
    • Removed all calc() calls for PX-based sizes.
    Source code(tar.gz)
    Source code(zip)

  • 0.1.0(Feb 27, 2021)

Owner
William Troup
A software developer with more than 20 years of experience, I've decided to start contributing more towards the open-source community!
William Troup
GitHub
Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable.

Custom icon library Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable. Upon each Material Design

Marius 12 Dec 12, 2022
A web app build with HTML, CSS, and JavaScript. It allow users to add a book title and and it's author. Content are rendered also dynamically.

Awesome books: with ES6 Description the project. Built With Major languages Frameworks Technologies used Awesome Books In this project the featured se

Evans Kupour 9 Nov 4, 2022
Module '2' Week two '2' project. The following technologies are used: HTML, CSS , Webpack, and JavaScript. Features of this app are rendered dynamically. It allows user to pinned or add task the will be doing on it. Local storage session is implemented. Task stay on app when user refresh or reload page. Task can be checked when completed.

To Do list: Description the project. Built With Major languages Frameworks Technologies used Screenshot of project Built With HTML, JAVASCRIPT, CSS, a

Evans Kupour 8 Nov 4, 2022
AWS CDK compiled for web (and Node!)

cdk-web ?? DEMO ?? AWS CDK compiled for web (and Node!) cdk-web and aws-cdk-web are functionally identical packages on npm. read about the differences

Sepehr Laal 44 Dec 5, 2022
Remix sandbox repo for Rust compiled to WASM and to native N-API modules

Rust <-> Remix Sandbox Now with both native Rust and WASM versions! If you want to combine the Web Fundamentals & Modern UX of Remix together with the

Ben Wishovich 26 Dec 30, 2022
Solid, AssemblyScriptified and compiled to WebAssembly

solid-as Solid as _____! Solid, AssemblyScriptified and compiled to WebAssembly (very work in progress). Installation TODO Test npm i && npm test TODO

Joe Pea 4 Jul 19, 2022
Minimal template engine with compiled output for JavaScript.

@fnando/seagull Minimal template engine with compiled output for JavaScript. Installation This package is available as a NPM package. To install it, u

Nando Vieira 5 Mar 1, 2022
PDF.js compiled for node-less, serverless enviroments.

Pdf.mjs PDF.js custom-compiled for nodeless, serverless enviroments, like Deno Deploy and Cloudflare Workers. Rocking in under 700kb uncompressed. Usa

Brúnó Salomon 7 Apr 16, 2022
A compiled-away, type-safe, readable RegExp alternative

?? magic-regexp A compiled-away, type-safe, readable RegExp alternative ✨ Changelog ?? Documentation ▶️ Online playground Features Runtime is zero-dep

Daniel Roe 1.5k Jan 8, 2023
A progressively enhanced server-rendered form-aware web component counter using WebC

Eleventy WebC Number Counter Demo A progressively enhanced server-rendered form-aware web component counter using WebC. This enhances from an <input t

Eleventy 6 Nov 11, 2022