css.gg

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-compone...

README

Open-source CSS, SVG and Figma UI Icons \
Available in SVG Sprite, styled-components, NPM & API

npm GitHub last commit Website npm GitHub issues GitHub stars Twitter Follow

css.gg
css.gg icons

New in 2.0

🥳 200 New Icons

🚀 SVG Icons

🔥 SVG Sprite

💅 Styled Components

⚛️ React Local Styled Components

🦄 Figma Components

🔮 Adobe XD Components


Table of Contents

    1.1. Example
  [2. Local Single Icon as styled-component](#2-local-single-icon-as--styled-component-)

Get Started

Install the latest version via npm or yarn
  1. ``` sh
  2. npm i css.gg
  3. ```
  1. ``` sh
  2. yarn add css.gg
  3. ```

Using Package Manager \
This package contains the following directories and files:


| Path                             | What it is |
| :-| :-|
| /css         | individual *.css icons                                        |
| /scss        | individual *.scss icons                                       |
| /svg         | individual *.svg icons                                        |
| /tsx         | individual *.tsx icons styled-components                    |
| /all.css     | all icons compressed in a single file                         |
| /all.d.ts    |  styled-components |
| /all.fig      | local figma file same as https://css.gg/fig  |
| /all.js      | list of exported styled-components  |
| /all.js.map  | styled-components  |
| /all.json    | all icons .css, .svg, *.tsx including markup & public path  |
| /all.scss     | all icons in a single SCSS file npm i node-sass needed                         |
| /all.svg     | SVG Sprite with all icons                                     |
| /all.xd     | local adobe xd file same as https://css.gg/xd                                     |
| /all.xml     | all icons .css, .svg, *.tsx including markup & public path  |


HTML include

1. All icons

  1. ``` html
  2. <link href='https://css.gg/css' rel='stylesheet'>
  3. <link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'>
  4. <link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>
  5. ```

2. Single icon

  1. ``` html
  2. <link href='https://css.gg/ {ICONNAME} .css' rel='stylesheet'>
  3. <link href='https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>
  4. <link href='https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>
  5. ```

3. Collection

  1. ``` html
  2. <link href='https://css.gg/css?= {ICONNAME} | {ICONNAME}' rel='stylesheet'>
  3. ```

4. Markup

  1. ``` html
  2. <i class=" {ICONNAME} "></i>
  3. <span class=" {ICONNAME} "></span>
  4. <div class=" {ICONNAME} "></div>
  5. <gg-icon class=" {ICONNAME} "></gg-icon>
  6. ```
5. Example
  1. ``` html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. <link href='https://css.gg/css' rel='stylesheet'>
  9. </head>
  10. <body>
  11. <i class="gg- {ICONNAME} "></i>
  12. <div class="gg- {ICONNAME} "></div>
  13. <gg-icon class="gg- {ICONNAME} "></gg-icon>
  14. </body>
  15. </html>
  16. ```


CSS @import

1. All icons

  1. ```css
  2. /* css.gg */
  3. @import url('https://css.gg/css');

  4. /* UNPKG */
  5. @import url('https://unpkg.com/css.gg/icons/all.css');

  6. /* JSDelivr */
  7. @import url('https://cdn.jsdelivr.net/npm/css.gg/icons/all.css');
  8. ```

2. Single icon

  1. ```css
  2. /* css.gg */
  3. @import url('https://css.gg/ {ICONNAME} .css');

  4. /* UNPKG */
  5. @import url('https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css');

  6. /* JSDelivr */
  7. @import url('https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css');
  8. ```

3. Collection

  1. ```css
  2. /* css.gg */
  3. @import url('https://css.gg/css?= {ICONNAME} | {ICONNAME}');
  4. ```

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.

  1. ```css
  2. .gg-{ICONNAME} {
  3.     /* This value will multiple the actual size */
  4.     --ggs: 10;
  5. }
  6. ```

The variable can be added to the parent, custom class,body or root level if you want all icons same size.

  1. ```css
  2. :
  3.     --ggs: 6;
  4. }
  5. ```

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.
  1. ```css
  2. .gg-{ICONNAME} {
  3.   color: teal;
  4. }
  5. ```

SVG

1. SVG Sprite - Download Path

You can't use these paths, you must download since SVG doesn't allow external sources.
  1. ``` html
  2. https://css.gg/svg
  3. https://unpkg.com/css.gg/icons/all.svg
  4. https://cdn.jsdelivr.net/npm/css.gg/icons/all.svg
  5. ```
1.1. Example
  1. ``` html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10. <svg><use xlink:href="path/to/all.svg# {ICONNAME} "/></svg>
  11. </body>
  12. </html>
  13. ```

2. SVG Single Icon - Download Path

  1. ``` html
  2. https://css.gg/ {ICONNAME} .svg
  3. https://unpkg.com/css.gg/icons/svg/ {ICONNAME} .svg
  4. https://cdn.jsdelivr.net/npm/css.gg/icons/svg/ {ICONNAME} .svg
  5. ```
2.1. Example - SVG Sprite
  1. ``` html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10. <svg><use xlink:href="path/to/all.svg# {ICONNAME} "/></svg>
  11. </body>
  12. </html>
  13. ```
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
  1. ``` html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10. <svg xmlns="http://www.w3.org/2000/svg" style="display: none;" >
  11.     <symbol id="{ICONNAME}">
  12.       
  13.     </symbol>
  14.   </svg>
  15. <svg><use xlink:href="# {ICONNAME} "/></svg>
  16. </body>
  17. </html>
  18. ```

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
  1. ``` html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5" /> <path d="M6 7H18V11H6V7Z" fill="currentColor" /> </svg>
  11. </body>
  12. </html>
  13. ```

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

  1. ```css
  2. .gg-{ICONNAME} {

  3.   background-image:
  4.     url("data:image/svg+xml,");

  5. }
  6. ```

To encode use this tool \

https://yoksel.github.io/url-encoder/

3.1. Example - Encoded SVG for CSS icon

  1. ``` html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10. <i class="gg- {ICONNAME} "></i>
  11. <div class="gg- {ICONNAME} "></div>
  12. <gg-icon class="gg- {ICONNAME} "></gg-icon>
  13. </body>
  14. </html>
  15. ```

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

  1. ``` html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10. <svg><path fill=" {COLOR} " /></svg>
  11. </body>
  12. </html>
  13. ```

4.2. using class

  1. ``` html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. <style>
  9.       /* 1. You define the CSS class like this:  */
  10.       .custom__color path {
  11.         color: teal;
  12.       }
  13.     </style>
  14. </head>
  15. <body>
  16. <svg class="custom__color"><path /></svg>
  17. </body>
  18. </html>
  19. ```

JSON - paths

1. All icons

  1. ``` html
  2. https://css.gg/json
  3. https://css.gg/json?=&op=css
  4. https://css.gg/json?=&op=css+markup
  5. https://unpkg.com/css.gg/icons/all.json
  6. https://cdn.jsdelivr.net/npm/css.gg/icons/all.json
  7. ```

2. Single icon

  1. ``` html
  2. https://css.gg/json?= {ICONNAME}
  3. https://css.gg/json?= {ICONNAME} &op=css
  4. https://css.gg/json?= {ICONNAME} &op=css+markup
  5. ```

3. Collection

  1. ``` html
  2. https://css.gg/json?= {ICONNAME} | {ICONNAME}
  3. https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css
  4. https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css+markup
  5. ```

XML - paths

1. All icons

  1. ``` html
  2. https://css.gg/xml
  3. https://css.gg/xml?=&op=css
  4. https://css.gg/xml?=&op=css+markup
  5. https://unpkg.com/css.gg/icons/all.xml
  6. https://cdn.jsdelivr.net/npm/css.gg/icons/all.xml
  7. ```

2. Single icon

  1. ``` html
  2. https://css.gg/xml?= {ICONNAME}
  3. https://css.gg/xml?= {ICONNAME} &op=css
  4. https://css.gg/xml?= {ICONNAME} &op=css+markup
  5. ```

3. Collection

  1. ``` html
  2. https://css.gg/xml?= {ICONNAME} | {ICONNAME}
  3. https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css
  4. https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css+markup
  5. ```

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:
  1. ``` js
  2. import { ICONNAME } from 'css.gg'
  3. ```

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:
  1. ``` js
  2. import React from 'react'
  3. import { ICONNAME } from 'css.gg'

  4. export default function() {
  5.   return (
  6.     <div>
  7. <ICONNAME />
  8. </div>
  9.   )
  10. }
  11. ```

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:
  1. ``` html
  2. https://css.gg/{ICONNAME}.tsx
  3. ```

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.
  1. ``` html
  2. https://css.gg/{ICONNAME}
  3. ```

2.2. Local Component Example

  1. ``` js
  2. import React from 'react';

  3. // local path
  4. import { ICONNAME } from "./ {ICONNAME} "

  5. function App() {
  6.   return (
  7.     <div>
  8. <ICONNAME />
  9. </div>
  10.   );
  11. }

  12. export default App;
  13. ```

3. SVG Sprite method

  1. ``` js
  2. import React from 'react';

  3. // Import function from package
  4. import { SVG } from 'css.gg'

  5. function App() {
  6.   return (
  7.     <div>
  8. <svg width="24" height="24"><use xlinkHref={SVG + '#gg-ICONNAME'} />svg>
  9. </div>
  10.   );
  11. }

  12. export default App;
  13. ```

4. All CSS icons

  1. ``` js
  2. import React from 'react';

  3. // Import function from package
  4. import { CSS } from 'css.gg'

  5. function App() {
  6.   return (
  7.     <div>
  8. <i className="gg- {ICONNAME} "></i>
  9. <div className="gg- {ICONNAME} "></div>
  10. <gg-icon className="gg- {ICONNAME} "></gg-icon>
  11. </div>
  12.   );
  13. }

  14. export default App;
  15. ```

4.1. Single CSS icon

  1. ``` js
  2. import React from 'react';

  3. // Import path from package
  4. import 'css.gg/icons/css/ {ICONNAME} .css'

  5. function App() {
  6.   return (
  7.     <div>
  8. <i className="gg- {ICONNAME} "></i>
  9. <div className="gg- {ICONNAME} "></div>
  10. <gg-icon className="gg- {ICONNAME} "></gg-icon>
  11. </div>
  12.   );
  13. }

  14. export default App;
  15. ```

5. All SCSS icons

SCSS format to work you need to have node-sass installed npm i node-sass
  1. ``` js
  2. import React from 'react';

  3. // Import function from package
  4. import { SCSS } from 'css.gg'

  5. function App() {
  6.   return (
  7.     <div>
  8. <i className="gg- {ICONNAME} "></i>
  9. <div className="gg- {ICONNAME} "></div>
  10. <gg-icon className="gg- {ICONNAME} "></gg-icon>
  11. </div>
  12.   );
  13. }

  14. export default App;
  15. ```

5.1. Single SCSS icon

SCSS format to work you need to have node-sass installed npm i node-sass
  1. ``` js
  2. import React from 'react';

  3. // Import path from package
  4. import 'css.gg/icons/scss/ {ICONNAME} .scss'

  5. function App() {
  6.   return (
  7.     <div>
  8. <i className="gg- {ICONNAME} "></i>
  9. <div className="gg- {ICONNAME} "></div>
  10. <gg-icon className="gg- {ICONNAME} "></gg-icon>
  11. </div>
  12.   );
  13. }

  14. export default App;
  15. ```

6. Combined import SVG, CSS, SCSS etc.

  1. ``` js

  2. import { SVG, CSS, SCSS, ICONNAME, ICONNAME } from 'css.gg'

  3. ```

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


2. Adobe XD - https://css.gg/xd

All icons are available as components \
css.gg figma

Contributors

1. Astrit - Author
2. JiangWeixian - Styled Components
3. Lona - Figma/SVG Design

To become a contributor do a new pull request.

Donate

| Source          | Link                               |
| :-------------- | :----------------------------------|
| Github Sponsor  | https://github.com/sponsors/astrit |
| Open Collective | https://opencollective.com/css-gg  |
| PayPal          | https://paypal.me/GjonMalsijaj     |

Support

Discord - https://discord.gg/e7NDKFM

v.1.0.6 or older

In order to access older versions you can use one of the provided CDN Alternatives
  1. ``` html
  2. https://unpkg.com/browse/css.gg@1.0.6/
  3. https://cdn.jsdelivr.net/npm/css.gg@1.0.6/
  4. ```

TODO:

1. CSS Modules
2. Angluar
3. Vue.js

If you would like to contribute feel free to do a new pull request.