astrit / css.gg

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

IIIIII

deƨign · code · oss
スタート 2008

© ~ CSS.GG

Design × Code ~ SEB™
↪ Stockholm, Sweden
  
スキル × </> {@} ($) [;] /(reg)ex/

css.gg's Issues

more keywords to search through the icons on the website

whenever I'm looking for an icon it seems to be a hit or miss and often results in me scrolling until I find the right icon. adding more keywords should solve this issue

Icons in React

Good morning, sir,
I just started a new project and I'm starting to use css.gg.
I use React and styled-component.
I've made a codesandbox to show how, maybe, we could import these Icons into React.
I know there are already component style based Icons but they should, however, be more customizable.
It's just an approach that I think needs to be improved.
I also noticed that there are no title tags in the svg.
Thanks for the work.
Good continuation.

here is the codesandbox :

https://codesandbox.io/s/cssgg-styled-react-hdhtc?file=/src/App.tsx

Testing with Jest

Hello guys,

We started using css.gg on our React/React Native Design System and it worked perfectly. On the other hand, when we tried to test it using Jest and React Testing Library all the components using this lib broke.

We don't have CSS files on our project, because we use styled-components for styling, so we don't have a CSS rule on our webpack.

test.tsx:

import * as React from 'react';
import { render } from '@testing-library/react-native';

import Button from '../index';

describe('Button Test', () => {
  it('should render the button', () => {
    const { toJSON } = render(<Button />);

    expect(toJSON()).toMatchSnapshot();
  });
});

component.tsx:

import React from 'react';
import { ButtonProps } from './types';
import { ButtonComponent, TextComponent, Wrapper } from './styles';
import { SVG } from 'css.gg';

const Button = ({ onPress, variant, text, iconName, iconMessage }: ButtonProps) => (
  <ButtonComponent variant={variant} onPress={onPress} activeOpacity={1}>
    {text && !iconName && (
      <Wrapper iconName={iconName}>
        <TextComponent>{text}</TextComponent>
      </Wrapper>
    )}
    {iconName && !text && (
      <>
        <div className="tooltip">
          <svg viewBox="0 0 24 24">
            <use xlinkHref={SVG + `#gg-${iconName}`} />
          </svg>
          <span className="tooltiptext">{iconMessage}</span>
        </div>
      </>
    )}
    {iconName && text && (
      <>
        <Wrapper iconName={iconName}>
          <TextComponent>{text}</TextComponent>
        </Wrapper>
        <svg viewBox="0 0 24 24">
          <use xlinkHref={SVG + `#gg-${iconName}`} />
        </svg>
      </>
    )}
  </ButtonComponent>
);

export default Button;

Any clues? Thank you :)

--

Edit: we are using react-native-web to organize what is native and what is web. We have an alias mapped to react-native to call react-native-web instead.

Why there is no play icon ?

It contains play stop/pause/prev/next... but there is no play icon like this ▶️.

I create a styled-components version

hey, i convert css.gg to styled-components, i hope that helps. https://github.com/JiangWeixian/styled-cssgg

✒ Request tracker

This issue is intended to track new icon request that are possible to be done and their progress and also those that are not due to the limitations on CSS, in order to reduce the number of new issues for the same icons.

	Name	Status	Progress
📌	Reddit	Impossible
📌	Github	Impossible
📌	Speaker Deck	Possible	0%

Subscript and Superscript icons

Probably it would be good if you can add subscript and superscript icons as well. Most libraries dont have them. Hence, it would distinguish yours among them.

Feature request: settings icon (gear / cogs)

First of all, thank you for this awesome icon set, it’s extensive and imo looks better than most (open source or otherwise).

Is gear / cogs icon possible to make?

inconsistencies between browsers and zoom levels

Some icons are inconsistent and broken in different browsers and at different zoom levels.
There's also inconsistencies between viewing them on my 4k screen at 125% DPI scaling or on my 1080p screen at 100% DPI scaling. Since you advertise your icons as both accessible and retina-ready, they should work consistently across all zoom levels and on all DPI scalings.

Here is an imgur album that demonstrates the issue: https://imgur.com/a/wGqacsx

Why don't we have a github icon yet?

SCSS placeholders version

Hi there!
Thanks for building such a great tool :)

I was wondering if it were possible to have a SCSS version using placeholders instead of CSS classes. It would allow to @extend the icons instead of including all of them in our CSS. It would be a really great improvement for us as we could be able to include any of your awesome icons anytime without overcharging our final CSS with loads of unused selectors.

It shouldn't be that hard to do as the script would only have to replace .gg- by %gg-.
The few keyframes would still be output in the CSS by SASS. The only way to clean them might be to use a postcss script like postcss-discard-unused because SASS does not allow to put keyframes in a placeholder. This tip could be added in the documentation.

What do you think?

Icon Request: Cog (Settings)

It would be a nice addition and can be useful for Settings pages or menu

website filter accepts null but returns no results (sort of)

I was just passing through, and searched for several icons on the website, getting no results on any of them.

Starting to wonder if the problem was on my end (and wanted to see what icons you do have) so I left the filter field "blank" and hit Enter (same as clicking this).

It says 507 results (presumably all the icons) but displays zero of them.

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

Icon Request: Icons for maps

Icon Request of location marker, map, point etc.

animations on pseudo elements don't work in safari

a lot of the animations rely on the pseudo elements being animated.
Since this doesn't work in some browsers. I suggest favouring animating the base element:
eg:

@keyframes spinneralt {
	0% { transform: rotate(0deg) }
	to { transform: rotate(359deg) }
}

.gg-spinner-alt {
	transform: scale(var(--ggs,1));
	animation: spinneralt 1s cubic-bezier(.6,0,.4,1) infinite; /*  this line was defined on the before pseudo-element and moving it doesn't change the behaviour but improves browser compatibility */ 
}

.gg-spinner-alt,
.gg-spinner-alt::before {
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 20px;
	height: 20px
}

.gg-spinner-alt::before {
	content: "";
	position: absolute;
	border-radius: 100px;
	border: 3px solid transparent;
	border-top-color: currentColor
}

Any idea to add scss support too?

Just wondering If you have plans to add scss file too in addition to css file. that would come in handy when working with angular/react projects.

Icon Request: Reddit

Would like to see a Reddit icon in this pack. Thanks

✒ Request tracker

This issue is intended to track new icon request that are possible to be done and their progress and also those that are not due to the limitations on CSS, in order to reduce the number of new issues for the same icons.

Nr.	Name	Status	Progress
#36	Reddit	n/a	--
#35	Github	n/a	--
#34	Speaker Deck	Possible	0%
#28	Subscript	Possible	0%
#28	Superscript	Possible	0%
#30	Vercel	Possible	80%
#44	Fingerprint	Possible	0%

Icon Request: IndieHackers

Hey Astrit. I am a huge fan of IndieHackers and would like to have an icon of it for a future web portfolio for myself. I've searched all I could and there is no other icon kit with a IH icon.

That would be great if you could add an IndieHackers icon to your kit.

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:

This is what I've applied:

Just thought I let you know :)

Peter

Icon Request: Cinema chair

It would be lovely to see a cinema chair in the collection which could be used to create seat booking pages.

Hexagon shows gaps on outside

This is awesome.

Let me know if I can help out somehow.

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

Icon Request: Speaker Deck

Hi. Awesome work, thanks!

I hope an issue is an acceptable form for an icon request. I couldn't find any info on requesting additional icons in the README.

I would appreciate an icon for the https://speakerdeck.com/ logo, a service for hosting slide decks.

Format-bold.svg is broken

See https://github.com/astrit/css.gg/blob/master/icons/svg/format-bold.svg

test

Apple watch crown

Hi,

First of all thanks for your effort and for this awesome icons lib.

Is it just me or the apple watch crown looks weird as the crown has no round corners?
LE: As I see you've designed around the actual look and feel of an apple watch 5th series. As I'm looking down at my wriest the watch has no round corners and everything looks like having a smooth transition, even the crown.

Thanks!

Icon Request: Twitch

Twtich.tv logo (Glitch) can be downloaded here: https://brand.twitch.tv/downloads/twitch-brand-assets.zip

More info on their branding: https://brand.twitch.tv/

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 !

male and female icons

you probably wanna check the male and female icons.
maybe they are wrong? ;-)

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 😸

Icon Request: "Airplane" Send Icon

A standard "airplane" send icon would be a nice addition. It would be very useful for web apps with a chat.

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!

🚨 Before creating a new issue

Please take a moment to review this document in order to make the contribution
process easy and effective for everyone involved.

Following these guidelines helps to communicate that you respect the time of
the developers managing and developing this open source project. In return,
they should reciprocate that respect in addressing your issue or assessing
patches and features.

Using the issue tracker

The issue tracker is the preferred channel for bug reports,
features requests and submitting pull
requests, but please respect the following restrictions:

• Please do not use the issue tracker for personal support requests (use
  Stack Overflow or IRC).

• Please do not derail or troll issues. Keep the discussion on topic and
  respect the opinions of others.

Bug reports

A bug is a demonstrable problem that is caused by the code in the repository.
Good bug reports are extremely helpful - thank you!

Guidelines for bug reports:

1. Use the GitHub issue search — check if the issue has already been
   reported.

2. Check if the issue has been fixed — try to reproduce it using the
   latest master or development branch in the repository.

3. Isolate the problem — create a reduced test
   case and a live example.

A good bug report shouldn't leave others needing to chase you up for more
information. Please try to be as detailed as possible in your report. What is
your environment? What steps will reproduce the issue? What browser(s) and OS
experience the problem? What would you expect to be the outcome? All these
details will help people to fix any potential bugs.

Example:

Short and descriptive example bug report title

A summary of the issue and the browser/OS environment in which it occurs. If
suitable, include the steps required to reproduce the bug.

1. This is the first step
2. This is the second step
3. Further steps, etc.

<url> - a link to the reduced test case

Any other information you want to share that is relevant to the issue being
reported. This might include the lines of code that you have identified as
causing the bug, and potential solutions (and your opinions on their
merits).

Feature requests

Feature requests are welcome. But take a moment to find out whether your idea
fits with the scope and aims of the project. It's up to you to make a strong
case to convince the project's developers of the merits of this feature. Please
provide as much detail and context as possible.

Pull requests

Good pull requests - patches, improvements, new features - are a fantastic
help. They should remain focused in scope and avoid containing unrelated
commits.

Please ask first before embarking on any significant pull request (e.g.
implementing features, refactoring code, porting to a different language),
otherwise you risk spending a lot of time working on something that the
project's developers might not want to merge into the project.

Please adhere to the coding conventions used throughout a project (indentation,
accurate comments, etc.) and any other requirements (such as test coverage).

Follow this process if you'd like your work considered for inclusion in the
project:

1. Fork the project, clone your fork,
   and configure the remotes:

   # Clone your fork of the repo into the current directory
   git clone https://github.com/<your-username>/<repo-name>
   # Navigate to the newly cloned directory
   cd <repo-name>
   # Assign the original repo to a remote called "upstream"
   git remote add upstream https://github.com/<upstream-owner>/<repo-name>

2. If you cloned a while ago, get the latest changes from upstream:

   git checkout <dev-branch>
   git pull upstream <dev-branch>

3. Create a new topic branch (off the main project development branch) to
   contain your feature, change, or fix:

   git checkout -b <topic-branch-name>

4. Commit your changes in logical chunks. Please adhere to these git commit
   message guidelines
   or your code is unlikely be merged into the main project. Use Git's
   interactive rebase
   feature to tidy up your commits before making them public.

5. Locally merge (or rebase) the upstream development branch into your topic branch:

   git pull [--rebase] upstream <dev-branch>

6. Push your topic branch up to your fork:

   git push origin <topic-branch-name>

7. Open a Pull Request
   with a clear title and description.

IMPORTANT: By submitting a patch, you agree to allow the project owner to
license your work under the same license as that used by the project.

Icon Request: PayPal icon

Any more info required?

icon request: chat/msg/send

Is there something like chat icon like messages? And send?

Icon Request: Fingerprint reader icon

I've been using css.gg for designs and it is really good. But there is no fingerprint icon, with is not good. Can you make fingerprint icon?

import collection in main.scss

Hi, can we import a collection directly in our sass file ?

what i tried @import "~css.gg/icons/scss?= {airplane} | {add}";

thanks

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.

Icon request: drag handle

Would be super useful to have a nice drag handle icon. Usually double-stack of 3 vertical dots.

Feature request: alternate searchable icon labels

A very important feature to add to the website would be alternate searchable icon labels.

• If a user wants to find out if css.gg supports an icon they want, they will search for it
• The search returns exact matches only and is missing icons which are a close match but with a different name

Examples of this issue

• If someone searches for "person", 0 results show up even though "user", "profile", "boy", and "girl" exist and match what the user is looking for.
• If someone searches for "user" only icons containing the word "user" show up. "Profile" does not even though it could represent a user.
• If someone searches for "computer", 0 results show up, but "screen" looks like a computer and should show up.
• If someone wants a dark mode icon, they may search "dark mode", but the "sun" and "moon" icons which can work as well don't show up. Css.gg itself uses the "sun" icon and not the "dark-mode" icon for the toggle.

Why this should be implemented

Very often, I will go to css.gg and search for an icon and I won't find any results, not because they aren't there, but because they only show up when you get the name exactly right.

Sometimes I need to make 4 or 5 searches to find an icon I'm looking for and many times I give up searching and look elsewhere.

Icon request: Bangladeshi Taka (BDT)

Can you add Bangladeshi (🇧🇩 ) Taka (BDT) in the CSS.gg icons list?

Unicode (৳)

Thanks 🥳

Increasing size breaks fluidity of some icons

Increasing the size parameter, breaks the :after of some icons for example bookmark. Please fix this

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.

Icon Request: GitHub

For those who would like to use this icon collection to link to various profiles, e.g. on personal homepage, the GitHub logo/mark (the octocat) would be a great addition!

https://github.com/logos

Check Round - Specifiy color

Specify color on pseudo selector to apply when there is a overwrite.
https://css.gg/check-o

✨ Bucketlist

	Feature	Status	Progress
📌	Styled Components	Finished	100%
📌	CSS Modules		0%
📌	Angular		0%
📌	Vue.js		0%
📌	Single File Components		0%
📌	Custom tag	Working	70%
📌	WP Plugin		0%
📌	Laravel		0%
📌	Typed React Components		50%
📌	Figma Plugin		0%
📌	Custom SVG Sprite		0%
📌	Sanity Plugin		0%

Rename Zeit to Vercel

According to their website Zeit.co was rebranded to vercel.com.

Read the announcement here

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]                           |
+---------------------------------------------------------------+