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 1 month ago
JSON representation

700+ Pure CSS, SVG, PNG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API and 6000 glyphs

Lists

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 Design



To 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