YouTube · App · Figma

700 Pure CSS, SVG, PNG Icons

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

Now also a collection of well organised 6000+ glyphs, easy copy paste and available on the raycast extension.

New in 2.1

🥳 1400 New Icons, in white and black PNG

🚀 6000+ glyphs available also available on glyphs.css.gg

Table of Contents

Get Started
HTML include
CSS @import
SVG
JSON - paths
XML - paths
React
- 1. Styled Components
- 2. Local Single Icon as styled-component
  - 2.1. Copy directly from the page
  - 2.2. Local Component Example
- 3. SVG Sprite method
- 4. All CSS icons
  - 4.1. Single CSS icon
- 5. All SCSS icons
  - 5.1. Single SCSS icon
- 6. Combined import SVG, CSS, SCSS etc.
Design Tools
- 1. Figma
- 2. Adobe XD
Contributors
Donate
Support
v.1.0.6 or older
TODO:

Get Started

Install the latest version via npm or yarn

npm i css.gg

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

HTML include

1. All icons

<!-- css.gg -->
<link href="https://css.gg/css" rel="stylesheet" />

<!-- UNPKG -->
<link href="https://unpkg.com/css.gg/icons/icons.css" rel="stylesheet" />

<!-- JSDelivr -->
<link
  href="https://cdn.jsdelivr.net/npm/css.gg/icons/icons.css"
  rel="stylesheet"
/>

2. Single icon

<!-- css.gg -->
<link href="https://css.gg/ {ICONNAME} .css" rel="stylesheet" />

<!-- UNPKG -->
<link
  href="https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css"
  rel="stylesheet"
/>

<!-- JSDelivr -->
<link
  href="https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css"
  rel="stylesheet"
/>

3. Collection

<!-- CSS Format -->
<link href="https://css.gg/css?= {ICONNAME} | {ICONNAME}" rel="stylesheet" />

4. Markup

<i class=" {ICONNAME} "></i>

<!-- reference icon using span -->
<span class=" {ICONNAME} "></span>

<!-- reference icon using div -->
<div class=" {ICONNAME} "></div>

<!-- reference icon using custom tag -->
<gg-icon class=" {ICONNAME} "></gg-icon>

5. Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- You can add this link or any other CDN alternatives as mentioned above -->
    <link href="https://css.gg/css" rel="stylesheet" />
  </head>
  <body>
    <!-- Using i tag  -->
    <i class="gg- {ICONNAME} "></i>

    <!-- Using div tag  -->
    <div class="gg- {ICONNAME} "></div>

    <!-- Using custom tag  -->
    <gg-icon class="gg- {ICONNAME} "></gg-icon>
  </body>
</html>

CSS @import

1. All icons

/* 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.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.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.

.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.

: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.

.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.

<!-- css.gg -->
https://css.gg/svg

<!-- UNPKG -->
https://unpkg.com/css.gg/icons/icons.svg

<!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/icons.svg

1.1. Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- First copy all.svg to your project directory -->
    <svg><use xlink:href="path/to/icons.svg# {ICONNAME} " /></svg>
  </body>
</html>

2. SVG Single Icon - Download Path

<!-- css.gg -->
https://css.gg/ {ICONNAME} .svg

<!-- UNPKG -->
https://unpkg.com/css.gg/icons/svg/ {ICONNAME} .svg

<!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/svg/ {ICONNAME} .svg

2.1. Example - SVG Sprite

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- First copy all.svg to your project directory -->
    <svg><use xlink:href="path/to/icons.svg# {ICONNAME} " /></svg>
  </body>
</html>

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <symbol id="{ICONNAME}">
        <!-- here goes the icon path  -->
      </symbol>
    </svg>

    <!-- Afterward you can call the icons by id like this: -->
    <svg><use xlink:href="# {ICONNAME} " /></svg>
  </body>
</html>

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- Just paste it where you want the icon to be  -->
    <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>
  </body>
</html>

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

.gg-{ICONNAME} {

  background-image:
    url("data:image/svg+xml,<svg></svg>");

}

To encode use this tool
https://yoksel.github.io/url-encoder/

3.1. Example - Encoded SVG for CSS icon

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- Using i tag  -->
    <i class="gg- {ICONNAME} "></i>

    <!-- Using div tag  -->
    <div class="gg- {ICONNAME} "></div>

    <!-- Using custom tag  -->
    <gg-icon class="gg- {ICONNAME} "></gg-icon>
  </body>
</html>

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg><path fill=" {COLOR} " /></svg>
  </body>
</html>

4.2. using class

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* 1. You define the CSS class like this:  */

      .custom__color path {
        color: teal;
      }
    </style>
  </head>
  <body>
    <!-- 2. After that you have to apply the class to the icon -->
    <svg class="custom__color"><path /></svg>
  </body>
</html>

JSON - paths

1. All icons

<!-- All attributes -->
https://css.gg/json

<!-- Only Style -->
https://css.gg/json?=&op=css

<!-- Style & Markup -->
https://css.gg/json?=&op=css+markup

<!-- UNPKG -->
https://unpkg.com/css.gg/icons/icons.json

<!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/icons.json

2. Single icon

<!-- All attributes -->
https://css.gg/json?= {ICONNAME}

<!-- Only Style -->
https://css.gg/json?= {ICONNAME} &op=css

<!-- Style & Markup -->
https://css.gg/json?= {ICONNAME} &op=css+markup

<!-- No CDN Alternatives -->

3. Collection

<!-- All attributes -->
https://css.gg/json?= {ICONNAME} | {ICONNAME}

<!-- Only Style -->
https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css

<!-- Style & Markup -->
https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css+markup

<!-- No CDN Alternatives -->

XML - paths

1. All icons

<!-- All attributes -->
https://css.gg/xml

<!-- Only Style -->
https://css.gg/xml?=&op=css

<!-- Style & Markup -->
https://css.gg/xml?=&op=css+markup

<!-- UNPKG -->
https://unpkg.com/css.gg/icons/icons.xml

<!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/icons.xml

2. Single icon

<!-- All attributes -->
https://css.gg/xml?= {ICONNAME}

<!-- Only Style -->
https://css.gg/xml?= {ICONNAME} &op=css

<!-- Style & Markup -->
https://css.gg/xml?= {ICONNAME} &op=css+markup

<!-- No CDN Alternatives -->

3. Collection

<!-- All attributes -->
https://css.gg/xml?= {ICONNAME} | {ICONNAME}

<!-- Only Style -->
https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css

<!-- Style & Markup -->
https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css+markup

<!-- No CDN Alternatives -->

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:

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:

import React from "react";
import { ICONNAME } from "css.gg";

export default function () {
  return (
    <div>
      <ICONNAME />
    </div>
  );
}

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:

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.

https://css.gg/{ICONNAME}

2.2. Local Component Example

import React from "react";

// local path
import { ICONNAME } from "./ {ICONNAME} ";

function App() {
  return (
    <div>
      <ICONNAME />
    </div>
  );
}

export default App;

3. SVG Sprite method

import React from "react";

// Import function from package
import { SVG } from "css.gg";

function App() {
  return (
    <div>
      <svg width="24" height="24">
        <use xlinkHref={SVG + "#gg-ICONNAME"} />
      </svg>
    </div>
  );
}

export default App;

4. All CSS icons

import React from 'react';

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

function App() {
  return (
    <div>

        <!-- Using i tag  -->
        <i className="gg- {ICONNAME} "></i>

        <!-- Using div tag  -->
        <div className="gg- {ICONNAME} "></div>

        <!-- Using custom tag  -->
        <gg-icon className="gg- {ICONNAME} "></gg-icon>

    </div>
  );
}

export default App;

4.1. Single CSS icon

import React from 'react';

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

function App() {
  return (
    <div>

        <!-- Using i tag  -->
        <i className="gg- {ICONNAME} "></i>

        <!-- Using div tag  -->
        <div className="gg- {ICONNAME} "></div>

        <!-- Using custom tag  -->
        <gg-icon className="gg- {ICONNAME} "></gg-icon>

    </div>
  );
}

export default App;

5. All SCSS icons

SCSS format to work you need to have node-sass installed npm i node-sass

import React from 'react';

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

function App() {
  return (
    <div>

        <!-- Using i tag  -->
        <i className="gg- {ICONNAME} "></i>

        <!-- Using div tag  -->
        <div className="gg- {ICONNAME} "></div>

        <!-- Using custom tag  -->
        <gg-icon className="gg- {ICONNAME} "></gg-icon>

    </div>
  );
}

export default App;

5.1. Single SCSS icon

SCSS format to work you need to have node-sass installed npm i node-sass

import React from 'react';

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

function App() {
  return (
    <div>

        <!-- Using i tag  -->
        <i className="gg- {ICONNAME} "></i>

        <!-- Using div tag  -->
        <div className="gg- {ICONNAME} "></div>

        <!-- Using custom tag  -->
        <gg-icon className="gg- {ICONNAME} "></gg-icon>

    </div>
  );
}

export default App;

6. Combined import SVG, CSS, SCSS etc.

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.

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

All icons are available as components

3. Penpot - https://github.com/penpot/penpot-files/raw/main/cssgg-icons.penpot

All icons are available as components. You can search for a single icon or browse categories.

Contributors

Astrit - Author
JiangWeixian - Styled Components
Lona - Figma/SVG Design

To become a contributor do a new pull request.

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

<!-- UNPKG -  v.1.0.6 -->
https://unpkg.com/browse/css.gg@1.0.6/

<!-- JSDelivr -  v.1.0.6 -->
https://cdn.jsdelivr.net/npm/css.gg@1.0.6/

Contribute

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

Activity

License

laurakalbag/css.gg

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages