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>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<svg><pathfill=" {COLOR} " /></svg>

</body>

</html>

4.2. using class

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="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 -->

<svgclass="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:

importReactfrom'react'

import{ICONNAME}from'css.gg'

exportdefaultfunction(){

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.