css.gg

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

  • css.gg

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
css.gg
9,587382.1.1a year ago4 years agoMinified + gzip package size for css.gg in KB

Readme

YouTube     •     App     •     Figma

CSS & SVG Icons — 700+

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

Glyphs - 6000+

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

CSS.GG — Icons & Glyphs on Raycast




npm GitHub last commit Website npm GitHub issues GitHub stars Twitter Follow
css.gg glyphs.css.gg


New in 2.1

🥳 1400 New Icons, in white and black PNG

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



Table of Contents
- 1. All icons - 2. Single icon - 3. Collection - 4. Markup - 5. Example - 1. All icons - 2. Single icon - 3. Collection - 4. Resizing - 5. Coloring - 1. SVG Sprite - Download Path
- [1.1. Example](#11-example)
- 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.1. Example - Encoded SVG for CSS icon](#31-example---encoded-svg-for-css-icon)
- 4. Coloring a SVG icon
- [4.1. Directly on the icon](#41-directly-on-the-icon)
- [4.2. using class](#42-using-class)
- 1. All icons - 2. Single icon - 3. Collection - 1. All icons - 2. Single icon - 3. Collection - 1. Styled Components - 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 - 4. All CSS icons
- [4.1. Single CSS icon](#41-single-css-icon)
- 5. All SCSS icons
- [5.1. Single SCSS icon](#51-single-scss-icon)
- 6. Combined import SVG, CSS, SCSS etc. - 1. Figma - 2. Adobe XD
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"
/>

  1. 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"
/>

  1. Collection

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

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

    <!-- 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");

  1. 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");

  1. Collection

/* css.gg */
@import url("https://css.gg/css?= {ICONNAME} | {ICONNAME}");

  1. 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;
}

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

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

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

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

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

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

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

  1. 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>
  );
}

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

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

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

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

  1. 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. css.gg figma

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