css.gg Icons

Q: How do I use css.gg icons in React?

Install the package with npm install css.gg, then import icons as components. Every css.gg page on IconStash shows the exact import statement and usage snippet for that specific icon in the Code tab, so you can copy working code without checking the docs. Tree-shakeable packages mean your bundler only includes the icons you actually import.

What css.gg is

css.gg takes a different approach from every other library here: each of its 705 icons is a single, self-contained CSS file. There is no SVG sprite, no icon font, and no JavaScript — you add the icon with a class name and the glyph is drawn entirely in CSS.

That has real practical benefits. Icons can be styled with ordinary CSS properties, animate with transitions, and inherit colour automatically, all without shipping a second asset format. css.gg also publishes SVG and React versions of every icon, so you are not locked into the CSS approach.

IconStash indexes the complete css.gg Icons collection. You can search it alongside 27 other libraries, preview any icon at any size and colour, and export SVG, PNG, React JSX, Vue, CSS, or an SVG sprite without installing a package or creating an account.

React

npm install css.gg

The official package ships each icon as a tree-shakeable component, so bundlers only include the icons you actually import. Open any css.gg icon on IconStash and the Code tab shows that icon's exact import statement and JSX.

Plain SVG and other frameworks

You do not have to install anything. Every css.gg page lets you copy the raw SVG markup and paste it inline, which avoids a dependency entirely and gives you full control over colour, size, and stroke width.

IconStash also exports PNG at six sizes, Vue and CSS snippets, and SVG sprites — all generated in the browser from the original vector.

Good fit

Projects that want zero-dependency icons, CSS-only prototypes, and interfaces where icons need to animate or respond to CSS state without JavaScript.

Consider alternatives

If you want a much larger set, Lucide and Tabler cover far more ground. CSS-drawn icons are also less suited to very large display sizes, where vector libraries hold up better.

Licensing

MIT. Every icon, in all three formats (CSS, SVG, React), is free for commercial use without attribution.

Library	Icons	Style	License
css.gg Icons	705	Outline	MIT
Feather Icons	286	Outline	MIT
Lucide Icons	1,979	Outline	ISC
Radix Icons	345	Outline	MIT
Pixel Art Icons	1,099	Pixel	MIT

Communication & Messaging

Bell Mail Phone Share

Media & Photography

Image Music Camera

Security & Privacy

Lock Shield Key

Interface & controls

Home Search Trash Eye Menu Check Link Abstract

Media icons Communication icons Commerce icons Navigation icons Files icons Editing icons Devices icons Development icons Security icons Health icons Weather icons Transport icons Social icons Time icons Data icons Interface icons

What is css.gg Icons?

css.gg takes a different approach from every other library here: each of its 705 icons is a single, self-contained CSS file. There is no SVG sprite, no icon font, and no JavaScript — you add the icon with a class name and the glyph is drawn entirely in CSS.

Is css.gg Icons free for commercial use?

Yes. css.gg Icons is released under the MIT license, which permits unrestricted commercial use, modification, and distribution. No attribution is required, though it is appreciated. This makes css.gg one of the safest icon libraries to use in commercial SaaS products, client work, and proprietary applications.

How do I use css.gg icons in React?

Install the package with npm install css.gg, then import icons as components. Every css.gg page on IconStash shows the exact import statement and usage snippet for that specific icon in the Code tab, so you can copy working code without checking the docs. Tree-shakeable packages mean your bundler only includes the icons you actually import.

Can I download css.gg icons as PNG?

Yes. Open any css.gg icon on IconStash and use the Download PNG button to export at 16, 32, 64, 128, 256, or 512 pixels. The PNG is generated client-side from the original vector, so it stays crisp at every size. You can also copy the raw SVG markup, export a React component, or build an SVG sprite without installing anything.

How do I add a css.gg icon to a page?

Include the icon's CSS file and add the matching class to an element — for example <i class="gg-home"></i>. The glyph is drawn with CSS pseudo-elements, so no image request is made. IconStash shows the exact class name and import line for every icon in the Code tab.

Are CSS-drawn icons worse for performance?

Usually not. A css.gg icon is a small stylesheet rule with no network request for image assets, and it scales and recolours with plain CSS. Trade-offs appear in complexity: very intricate glyphs are harder to express in CSS, which is partly why the set is 705 icons rather than several thousand.

Feather Icons Lucide Icons Radix Icons Pixel Art Icons Fluent UI Icons Material Symbols Material Symbols Light Material Design Icons