Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/astrit/css.gg
700+ Pure CSS, SVG, PNG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API and 6000 glyphs
https://github.com/astrit/css.gg
adobe-xd api css css-icon customizable figma figma-ui-icons icons json multiple-icons npm purecss retina-ready styled-components svg svg-icon svg-icon-pack svg-icons svg-sprite svg-sprites
Last synced: about 2 months ago
JSON representation
700+ Pure CSS, SVG, PNG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API and 6000 glyphs
- Host: GitHub
- URL: https://github.com/astrit/css.gg
- Owner: astrit
- License: mit
- Created: 2019-10-01T21:35:58.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-31T00:16:25.000Z (6 months ago)
- Last Synced: 2024-04-15T08:11:38.141Z (5 months ago)
- Topics: adobe-xd, api, css, css-icon, customizable, figma, figma-ui-icons, icons, json, multiple-icons, npm, purecss, retina-ready, styled-components, svg, svg-icon, svg-icon-pack, svg-icons, svg-sprite, svg-sprites
- Language: SCSS
- Homepage: https://css.gg
- Size: 6.25 MB
- Stars: 9,531
- Watchers: 104
- Forks: 471
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- my-awesome-list - css.gg
- awesome-icons - css.gg - Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API. ([Website](https://css.gg)) (General)
- awesome-github-star - css.gg - components, NPM & API and 6000 glyphs | astrit | 9308 | (SCSS)
- Awesome-CSS-Resources - css.gg: - components, NPM & API. (Frameworks / Resources / C)
- stars - astrit/css.gg - 700+ Pure CSS, SVG, PNG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API and 6000 glyphs (SCSS)
- awesome-iconjar - css.gg - 06-24 | 2024-05-13 | MIT | (IconSet Included)
- awesome-list - css.gg - components, NPM & API | astrit | 7740 | (CSS)
- jimsghstars - astrit/css.gg - 700+ Pure CSS, SVG, PNG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API and 6000 glyphs (SCSS)
- awesome-luooooob - astrit/css.gg - 700+ Pure CSS, SVG & Figma UI Icons, 6000+ glyphs, patterns, colors and layouts. (JavaScript)
README
# [YouTube](https://youtube.com/@astrit) · [App](https://css.gg) · [Figma](https://css.gg/fig)
## [700 Pure CSS, SVG, PNG Icons](https://css.gg)
Open-source CSS, SVG and Figma UI Icons \
Available in SVG Sprite, styled-components, NPM & API
!!! Now available as PNG in white and black colors
## [6000 Unique Glyphs](https://glyphs.css.gg)
Now also a collection of well organised 6000+ glyphs, easy copy paste and available on the raycast extension.
![npm](https://img.shields.io/npm/v/css.gg) ![GitHub last commit](https://img.shields.io/github/last-commit/astrit/css.gg) ![Website](https://img.shields.io/website?url=https%3A%2F%2Fcss.gg) ![npm](https://img.shields.io/npm/dt/css.gg) ![GitHub issues](https://img.shields.io/github/issues/astrit/css.gg) ![GitHub stars](https://img.shields.io/github/stars/astrit/css.gg) ![Twitter Follow](https://img.shields.io/twitter/follow/astritmalsija?label=follow&style=social)
![css.gg](https://cdn.css.gg/metadata/icons.png)
![glyphs.css.gg](https://cdn.css.gg/metadata/glyphs.png)
# New in 2.1
#### 🥳 1400 New Icons, in white and black PNG
#### 🚀 6000+ glyphs available also available on [glyphs.css.gg](https://glyphs.css.gg)
# Table of Contents
- [Get Started](#get-started)
- [HTML include](#html-include)
- [1. All icons](#1-all-icons)
- [2. Single icon](#2-single-icon)
- [3. Collection](#3-collection)
- [4. Markup](#4-markup)
- [5. Example](#5-example)
- [CSS @import](#css--import)
- [1. All icons](#1-all-icons-1)
- [2. Single icon](#2-single-icon-1)
- [3. Collection](#3-collection-1)
- [4. Resizing](#4-resizing)
- [5. Coloring](#5-coloring)
- [SVG](#svg)
- [1. SVG Sprite - Download Path](#1-svg-sprite---download-path)
- [1.1. Example](#11-example)
- [2. SVG Single Icon - Download Path](#2-svg-single-icon---download-path)
- [2.1. Example - SVG Sprite](#21-example---svg-sprite)
- [2.2. Example - Inline SVG Sprite/Symbol](#22-example---inline-svg-sprite-symbol)
- [2.3. Example Single copy/paste icon](#23-example-single-copy-paste-icon)
- [3. Encode SVG for CSS](#3-encode-svg-for-css)
- [3.1. Example - Encoded SVG for CSS icon](#31-example---encoded-svg-for-css-icon)
- [4. Coloring a SVG icon](#4-coloring-a-svg-icon)
- [4.1. Directly on the icon](#41-directly-on-the-icon)
- [4.2. using class](#42-using-class)
- [JSON - paths](#json---paths)
- [1. All icons](#1-all-icons-2)
- [2. Single icon](#2-single-icon-2)
- [3. Collection](#3-collection-2)
- [XML - paths](#xml---paths)
- [1. All icons](#1-all-icons-3)
- [2. Single icon](#2-single-icon-3)
- [3. Collection](#3-collection-3)
- [React](#react)
- [1. Styled Components](#1-styled-components---)
- [2. Local Single Icon as `styled-component`](#2-local-single-icon-as--styled-component-)
- [2.1. Copy directly from the page](#21-copy-directly-from-the-page)
- [2.2. Local Component Example](#22-local-component-example)
- [3. SVG Sprite method](#3-svg-sprite-method)
- [4. All CSS icons](#4-all-css-icons)
- [4.1. Single CSS icon](#41-single-css-icon)
- [5. All SCSS icons](#5-all-scss-icons)
- [5.1. Single SCSS icon](#51-single-scss-icon)
- [6. Combined import SVG, CSS, SCSS etc.](#6-combined-import-svg-css-scss-etc)
- [Design Tools](#design-tools)
- [1. Figma](#1-figma---httpscssggfig)
- [2. Adobe XD](#2-adobe-xd---httpscssggxd)
- [Contributors](#contributors)
- [Donate](#donate)
- [Support](#support)
- [v.1.0.6 or older](#v106-or-older)
- [TODO:](#todo)# Get Started
Install the latest version via npm or yarn
```shell
npm i css.gg
``````shell
yarn add css.gg
```Using Package Manager \
This package contains the following directories and files:| Path | What it is |
| :----------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ |
| /icons/css | individual \*.css icons |
| /icons/scss | individual \*.scss icons |
| /icons/svg | individual \*.svg icons |
| /icons/tsx | individual \*.tsx icons `styled-components` |
| /icons/icons.css | all icons compressed in a single file |
| /icons/icons.d.ts | `styled-components` |
| /icons/icons.fig | local figma file same as https://css.gg/fig |
| /icons/icons.js | list of exported `styled-components` |
| /icons/icons.js.map | `styled-components` |
| /icons/icons.json | all icons _.css, _.svg, \*.tsx including markup & public path |
| /icons/icons.scss | all icons in a single SCSS file `npm i node-sass` needed |
| /icons/icons.svg | SVG Sprite with all icons |
| /icons/icons.xml | all icons _.css, _.svg, \*.tsx including markup & public path |
| /glyphs/glyphs.json | 6000 glyphs categorized and available on json format |
# ❤️ Support
If you want to support further development of this project consider becoming a sponsor
[Github Sponsor — github.com/sponsors/astrit](https://github.com/sponsors/astrit)
# HTML include
#### 1. All icons
```html
```
#### 2. Single icon
```html
```
#### 3. Collection
```html
```
#### 4. Markup
```html
```
##### 5. Example
```html
Document
```
# CSS @import
#### 1. All icons
```css
/* css.gg */
@import url("https://css.gg/css");/* UNPKG */
@import url("https://unpkg.com/css.gg/icons/icons.css");/* JSDelivr */
@import url("https://cdn.jsdelivr.net/npm/css.gg/icons/icons.css");
```#### 2. Single icon
```css
/* css.gg */
@import url("https://css.gg/ {ICONNAME} .css");/* UNPKG */
@import url("https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css");/* JSDelivr */
@import url("https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css");
```#### 3. Collection
```css
/* css.gg */
@import url("https://css.gg/css?= {ICONNAME} | {ICONNAME}");
```#### 4. Resizing
> To resize an icon you just need to change the value of a css variable "--ggs" to any value you like if not specified it falls back to 1 or the actual size.
```css
.gg-{ICONNAME} {
/* This value will multiple the actual size */
--ggs: 10;
}
```> The variable can be added to the parent, custom class,body or root level if you want all icons same size.
```css
:root {
--ggs: 6;
}
```#### 5. Coloring
By default all the CSS, SCSS icons inherit the color from the parent by using `currentColor` attribute how ever you can apply any color you like.
```css
.gg-{ICONNAME} {
color: teal;
}
```# SVG
#### 1. SVG Sprite - Download Path
You can't use these paths, you must download since SVG doesn't allow external sources.
```html
https://css.gg/svg
https://unpkg.com/css.gg/icons/icons.svg
https://cdn.jsdelivr.net/npm/css.gg/icons/icons.svg
```##### 1.1. Example
```html
Document
```
#### 2. SVG Single Icon - Download Path
```html
https://css.gg/ {ICONNAME} .svg
https://unpkg.com/css.gg/icons/svg/ {ICONNAME} .svg
https://cdn.jsdelivr.net/npm/css.gg/icons/svg/ {ICONNAME} .svg
```##### 2.1. Example - SVG Sprite
```html
Document
```
##### 2.2. Example - Inline SVG Sprite/Symbol
You can add as symbol each or copy the entire file contents at one of the CDN alternatives as mentioned at 2.1
```html
Document
```
#### 2.3. Example Single copy/paste icon
You can go to `https://css.gg/{ICONNAME}` and copy the SVG icon directy and paste it on your project. \
You can also download a single icon by just visiting `https://css.gg/{ICONNAME}.svg````html
Document
```
#### 3. Encode SVG for CSS
You need to define width and height in order for this to work.
Afterwards you can just create a div```css
.gg-{ICONNAME} {background-image:
url("data:image/svg+xml,");}
```> To encode use this tool \
> https://yoksel.github.io/url-encoder/#### 3.1. Example - Encoded SVG for CSS icon
```html
Document
```
#### 4. Coloring a SVG icon
By default all colors use `currentColor` as value in order to inherit the color from the parent. \
If you wish to change that color you can do the following.#### 4.1. Directly on the icon
```html
Document
```
#### 4.2. using class
```html
Document
/* 1. You define the CSS class like this: */.custom__color path {
color: teal;
}
```
# JSON - paths
#### 1. All icons
```html
https://css.gg/json
https://css.gg/json?=&op=css
https://css.gg/json?=&op=css+markup
https://unpkg.com/css.gg/icons/icons.json
https://cdn.jsdelivr.net/npm/css.gg/icons/icons.json
```#### 2. Single icon
```html
https://css.gg/json?= {ICONNAME}
https://css.gg/json?= {ICONNAME} &op=css
https://css.gg/json?= {ICONNAME} &op=css+markup
```
#### 3. Collection
```html
https://css.gg/json?= {ICONNAME} | {ICONNAME}
https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css
https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css+markup
```
# XML - paths
#### 1. All icons
```html
https://css.gg/xml
https://css.gg/xml?=&op=css
https://css.gg/xml?=&op=css+markup
https://unpkg.com/css.gg/icons/icons.xml
https://cdn.jsdelivr.net/npm/css.gg/icons/icons.xml
```#### 2. Single icon
```html
https://css.gg/xml?= {ICONNAME}
https://css.gg/xml?= {ICONNAME} &op=css
https://css.gg/xml?= {ICONNAME} &op=css+markup
```
#### 3. Collection
```html
https://css.gg/xml?= {ICONNAME} | {ICONNAME}
https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css
https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css+markup
```
# React
On a React project you can include a single icon as CSS, Styled Component, SCSS, SVG or call the contents using .json or .xml files.
\
Note that only `styled-components` icons can be called directly such as:```js
import { ICONNAME } from "css.gg";
```#### 1. Styled Components 💅
After you install the package by using `npm i css.gg` or `yarn add css.gg` you can add a single icon like this:
```js
import React from "react";
import { ICONNAME } from "css.gg";export default function () {
return (
);
}
```#### 2. Local Single Icon as `styled-component`
If you need to download a single `typescript` or `styled-componment` format icon without downloading the entire package just visit the link like this:
```html
https://css.gg/{ICONNAME}.tsx
```#### 2.1. Copy directly from the page
If you don't want to download at all but just copy paste visit the icon page and you have a special tab for it.
```html
https://css.gg/{ICONNAME}
```#### 2.2. Local Component Example
```js
import React from "react";// local path
import { ICONNAME } from "./ {ICONNAME} ";function App() {
return (
);
}export default App;
```#### 3. SVG Sprite method
```js
import React from "react";// Import function from package
import { SVG } from "css.gg";function App() {
return (
);
}export default App;
```#### 4. All CSS icons
```js
import React from 'react';// Import function from package
import { CSS } from 'css.gg'function App() {
return (
);
}export default App;
```#### 4.1. Single CSS icon
```js
import React from 'react';// Import path from package
import 'css.gg/icons/css/ {ICONNAME} .css'function App() {
return (
);
}export default App;
```#### 5. All SCSS icons
SCSS format to work you need to have `node-sass` installed `npm i node-sass`
```js
import React from 'react';// Import function from package
import { SCSS } from 'css.gg'function App() {
return (
);
}export default App;
```#### 5.1. Single SCSS icon
SCSS format to work you need to have `node-sass` installed `npm i node-sass`
```js
import React from 'react';// Import path from package
import 'css.gg/icons/scss/ {ICONNAME} .scss'function App() {
return (
);
}export default App;
```#### 6. Combined import SVG, CSS, SCSS etc.
```js
import { SVG, CSS, SCSS, ICONNAME, ICONNAME } from "css.gg";
```# Design Tools
#### 1. Figma - https://css.gg/fig
All icons are available as components on assets from where you can search for a sigle icon or browse categories.
![css.gg figma](https://css.gg/img/pfig.png)#### 2. Adobe XD - https://css.gg/xd
All icons are available as components \
![css.gg figma](https://css.gg/img/pxd.png)# Contributors
1. [Astrit](https://github.com/astrit) - Author
2. [JiangWeixian](https://github.com/jiangWeixian) - Styled Components
3. [Lona](https://www.figma.com/@lona) - Figma/SVG DesignTo become a contributor do a [new pull request](https://github.com/astrit/css.gg/pulls).
# Support
Discord - https://github.com/astrit/css.gg/discussions
# v.1.0.6 or older
In order to access older versions you can use one of the provided CDN Alternatives
```html
https://unpkg.com/browse/[email protected]/
https://cdn.jsdelivr.net/npm/[email protected]/
```# Contribute
If you would like to contribute feel free to do a [new pull request](https://github.com/astrit/css.gg/pulls).
# Activity