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

  • By Astrit Malsia
  • Last update: Jan 9, 2023
  • Comments: 15

Demo - Figma - Twitter

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

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

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

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

<!-- JSDelivr -->
<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.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/all.css');

/* JSDelivr */
@import url('https://cdn.jsdelivr.net/npm/css.gg/icons/all.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/all.svg

<!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/all.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/all.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/all.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/all.json

<!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/all.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/all.xml

<!-- JSDelivr -->
https://cdn.jsdelivr.net/npm/css.gg/icons/all.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. 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

<!-- UNPKG -  v.1.0.6 -->
https://unpkg.com/browse/[email protected]/

<!-- JSDelivr -  v.1.0.6 -->
https://cdn.jsdelivr.net/npm/[email protected]/

TODO:

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

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

Github

https://github.com/astrit/css.gg

Comments(15)

  • 1

    Update license

    Hello! Great Project!

    I really liked the way you handled the pricing for this project but I don't think that an MIT license is suitable here?

    I'm looking to build projects with the same pricing structure and I hoped that you found a solution for which license to use 😸

  • 2

    bootstrap button with css.gg icon not in one line

    When I do this:

    <button class="btn btn-primary btn-block">
        A button <span class="gg-sort-az"></span>
    </button>

    the icon is moved to a new line. Like this:

    +---------------------------------------------------------------+
|                         A button                              |
|  [icon]                                                       |
+---------------------------------------------------------------+

    I am expecting this:

    +---------------------------------------------------------------+
|                   A button   [icon]                           |
+---------------------------------------------------------------+
  • 3

    Browser icon doesn't appear to scale completely

    Hello @astrit,

    I've tried to scale the browser icon up using CSS. One of the lines didn't scale proper:

    image

    This is what I've applied:

    image

    Just thought I let you know :)

    Peter

  • 4

    Gradient has outdated syntax

    The new syntax is like closest-side at 0 0 instead of 0 0, closest-side.

    This will show up in users' terminals if they're using postcss-loader or any other package that does evaluation.

  • 5

    Icon request : Hide icon

    Hello, Would it be possible to you to create a hide icon ? By that, I mean to take the eye icon which already exists, and cross it out. If you create it, it would go complete the eye icon if someone want to use icons for a password input to reveal or hide the text, for instance. Thanks in advance !

  • 6

    Pin icon fix

    While using the various icons, I noticed that the pin icon has an issue rendering on Firefox when it is scaled:

    Screen Shot 2020-01-21 at 9 59 09 AM

    This is due to the box-shadow property being set to inset while also using the transform property to scale the item. It works well in all other browsers except Firefox. To resolve the issue, I replaced the box-shadow with a border: 2px solid and adjusted the circle to be placed correctly in the pin with the new offset being at the border. The icon looks exactly the same as it had been before, but now renders correctly across all browsers.

  • 7

    Remove transform property from after psuedo element in copyright icon

    As there is scale being applied to both the <i> and the pseudo element, it means that the scale applied to the psuedo element is being multiplied, so the C breaks out of the surrounding circle

    Below is a screenshot taken from the https://css.gg/copyright page:

    image

    As we can see, the C has well and truly broken out of it's surrounding boundary.

    By simply applying transform: none to the after psuedo element specifically, the result is:

    image

  • 8

    Icon suggestions: aws, gcp, azure, nodejs, kubernetes, python, ruby on rails, docker, linux

    Hi,

    Very nice work!

    Just a few brand icons I thought about...

    • aws
    • gcp
    • azure
    • nodejs
    • kubernetes (dharmachakra)
    • python
    • ruby on rails
    • docker (containers)
    • linux

    Let me know what you think.

  • 9

    CSS vs SVG for icons

    Hi! This is just out of curiosity, What are the pro and cons of using CSS over SVG for icons? And vice-versa.

    Anyway, thank you for this useful project!

  • 10

    Angular support?

    Hi, I've tried integrating css.gg on an angular project. Since this doesn't have SASS files, I added the CSS file in angular.json.

    //angular.json
"styles": [
  "src/styles.scss",
  "node_modules/css.gg/icons-compressed/icons.css"
 ],

    But I'm getting this error

    WARNING in ./node_modules/css.gg/icons-compressed/icons.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/css.gg/icons-compressed/icons.css)
Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(1:80606) Gradient has outdated direction syntax. New syntax is like `closest-side at 0 0` instead of `0 0, closest-side`.
  • 11

    SVG icons do not scale

    The svg icons downloaded from the site do not scale with css properties height or width. Please set the height and width properties inside the svg to 100% so it scales properly. Affected platforms: anything which can display an svg

  • 12

    CSS transform causes --ggs var to not resize the icon

    If I add a transform to an icon, then --ggs variable will not apply to the icon. I can use scale along with my transform and it works.

    App.js

    <Spinner className="loading-icon" />

    app.css

    .loading-icon {
  postion: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,50%);
  //--ggs does not make the icon larger
  --ggs: 2; 
}

    app.css - Working

    .loading-icon {
  postion: absolute;
  top: 50%;
  left: 50%;
  //icon is now scaled
  transform: translate(-50%,50%)scale(2);
}

    Another alternative is wrapping the icon in a div and adding the transform to the parent div and using --ggs for the child icon.

    I created a sandbox so you can see the transform fix in action

  • 13

    Broken border-top icon

    The border-top icon uses a hardcoded value for one of it's paths' fills, instead of currentColor: https://github.com/astrit/css.gg/blob/master/icons/svg/border-top.svg?short_path=fd205a6#L13

    Compared to, for example, border-bottom: https://github.com/astrit/css.gg/blob/master/icons/svg/border-bottom.svg?short_path=6098ab3#L9

    This results in the path not having a fill when used from react-icons: react icons screenshot

    or having a fill that is hard to change when using the SVG directly.

  • 14

    VueJS wrapper for css.gg icons

  • 15

    Incomplete Documentation for React

    I am attempting to add an arrow long right to my project. I have a CodeSandbox set up so you can see what I have attempted. There is no documentation present on what to actually use for the ICONNAME, nor is there anything to indicate on the icon list that an icon is a styled-component or not. I just want a wee right arrow on the page and there's not a clear method to do it.

Popular Tag

Related