astrit / css.gg Goto Github PK
View Code? Open in Web Editor NEW700+ Pure CSS, SVG, PNG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API and 6000 glyphs
Home Page: https://css.gg
License: MIT License
700+ Pure CSS, SVG, PNG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API and 6000 glyphs
Home Page: https://css.gg
License: MIT License
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.
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.
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!
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
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.
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.
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
Can you add Bangladeshi (π§π© ) Taka (BDT) in the CSS.gg icons list?
Unicode (৳)
Thanks π₯³
Would like to see a Reddit icon in this pack. Thanks
Hi,
Very nice work!
Just a few brand icons I thought about...
Let me know what you think.
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!
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
A very important feature to add to the website would be alternate searchable icon labels.
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.
It contains play stop/pause/prev/next... but there is no play icon like this
Specify color on pseudo selector to apply when there is a overwrite.
https://css.gg/check-o
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
}
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!
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.
Increasing the size parameter, breaks the :after of some icons for example bookmark. Please fix this
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% |
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
It would be a nice addition and can be useful for Settings pages or menu
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 | 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% |
According to their website Zeit.co was rebranded to vercel.com.
Read the announcement here
It would be lovely to see a cinema chair in the collection which could be used to create seat booking pages.
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 πΈ
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
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?
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 of location marker, map, point etc.
Hi, can we import a collection directly in our sass file ?
what i tried @import "~css.gg/icons/scss?= {airplane} | {add}";
thanks
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?
Any more info required?
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`.
Is there something like chat icon like messages? And send?
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] |
+---------------------------------------------------------------+
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 !
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?
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.
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.
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:
Use the GitHub issue search β check if the issue has already been
reported.
Check if the issue has been fixed β try to reproduce it using the
latest master
or development branch in the repository.
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.
- This is the first step
- This is the second step
- Further steps, etc.
<url>
- a link to the reduced test caseAny 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 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.
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:
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>
If you cloned a while ago, get the latest changes from upstream:
git checkout <dev-branch>
git pull upstream <dev-branch>
Create a new topic branch (off the main project development branch) to
contain your feature, change, or fix:
git checkout -b <topic-branch-name>
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.
Locally merge (or rebase) the upstream development branch into your topic branch:
git pull [--rebase] upstream <dev-branch>
Push your topic branch up to your fork:
git push origin <topic-branch-name>
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.
you probably wanna check the male and female icons.
maybe they are wrong? ;-)
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 | |
---|---|---|---|
π | Impossible |
||
π | Github | Impossible |
|
π | Speaker Deck | Possible |
0% |
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.
hey, i convert css.gg to styled-components, i hope that helps. https://github.com/JiangWeixian/styled-cssgg
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.
Would be super useful to have a nice drag handle icon. Usually double-stack of 3 vertical dots.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.