coreyginnivan / system-uicons

System UIcons is an icon library design for systems and products. Use how you want, without attribution.

What is System UIcons?

System UIcons is a collection of open source icons designed for products and systems in mind. Each icon is on a 21x21 grid.

Use the icons how you want, for free, and without any attribution.

https://systemuicons.com/

Looking for a React library of System UIcons?

Martin Zlámal has created an awesome open source community icon group over at System UIcons React

system-uicons's Issues

Unable to set color

Hello,

I'm unable to set the color from a parent container in html.

<svg style="width:64px; height:64px; fill:red;" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 3)"><path d="m1.5 4.5h14v7.9976807c0 1.1045695-.8954305 2-2 2h-10c-1.1045695 0-2-.8954305-2-2zm0-3.9777832h14c.5522847 0 1 .44771525 1 1v1.9777832c0 .55228475-.4477153 1-1 1h-14c-.55228475 0-1-.44771525-1-1v-1.9777832c0-.55228475.44771525-1 1-1z"></path><path d="m6.5 7.5h4"></path></g></svg>

results in

As I'm building a utility which inserts svg icons directly from markup (e.g. <x-systemuicon-archive style="width:64px; height:64px; fill:red;" /> results in the code above. Is there any possibility to make this work with classes without modifying the svg files?

Something wrong with refresh.svg

Check the svg code of refresh icons. Something really gone wrong there.
Here's the example of how it looks

Make fill/stroke colors customizable

Just a suggestion, a neat feature would be to provide a dynamic color value for the icons, like currentColor or var(--icon-color, #111) to allow icons to take on the color of their parent elements & be more customizable when inline.

I usually do something like this when having to support dark mode with icons.

'View Icon' and 'External Link Icon' are missing

I'd like to use system-uicons to a Ethereum project and specially the external link icon is really useful to redirect people to Etherscan.

Precision

<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg">
<path d="m8 13.5172414c4.418278 0 8-3.0259376 8-6.75862071 0-3.73268314-3.581722-6.75862069-8-6.75862069s-8 
3.02593755-8 6.75862069c0 1.45741942.5460328 2.80709561 1.47469581 3.91098161l-.97469581 4.5803977 3.91607376
-2.4472652c1.07810761.4571647 2.29544433.7145066 3.58392624.7145066z" 
fill="none" stroke="#2a2e3b" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 4)"/></svg>

With this N.12345678 precision you are stuffing 100,000,000 pixels into 1

Run svg through SVGO?

I'm just starting to integrate these icons into a new project & noticed that there's some extra markup in the svgs that we removed when working them into our markup.

Example: Link

Pre-SVGO

<svg
  height="21"
  viewBox="0 0 21 21"
  width="21"
  xmlns="http://www.w3.org/2000/svg"
>
  <g
    fill="none"
    fill-rule="evenodd"
    stroke="#2a2e3b"
    stroke-linecap="round"
    stroke-linejoin="round"
    transform="translate(3 4)"
  >
    <path
      d="m4.17157288 4.87867966v-1.41421357c0-1.56209716 1.26632995-2.82842712 2.82842712-2.82842712s2.82842712 1.26632996 2.82842712 2.82842712v1.41421357m0 2.82842712v2.82842712c0 1.5620972-1.26632995 2.8284271-2.82842712 2.8284271s-2.82842712-1.2663299-2.82842712-2.8284271v-2.82842712"
      transform="matrix(.70710678 .70710678 -.70710678 .70710678 7 -2.899495)"
    />
    <path d="m4.5 9.5 5-5" />
  </g>
</svg>;

Post-SVGO

<svg viewBox="0 0 21 21" height="21" width="21" xmlns="http://www.w3.org/2000/svg">
    <path
      fill="none"
      fillRule="evenodd"
      stroke="#2a2e3b"
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M9.5 7.5l1-1a2.828 2.828 0 114 4l-1 1m-2 2l-2 2a2.828 2.828 0 11-4-4l2-2M7.5 13.5l5-5"
    />
  </svg>

Is this something that's in the works eventually? I'm happy to SVGO the icons for our project, but it might same some CDN bandwidth to do them on the source side :)

Community icon contribution guideline request

This is a superb project and I believe many people like myself would like to contribute and grow the icon base for everyone.
Will it be possible to provide some guidelines about the design language so as to maintain consistent icons submitted by different future contributors?

I have a few icons I believe could be useful for the project.
Anyway, thanks for providing a completely free way of using these icons however we want.

Gorgeous, but some seem to be lacking consistency

First of all, these are gorgeous icons (I'd love to see them on icomoon!). Kudos!

This is definitely firmly in the realm of nitpicking, but I did notice a few specific icons that seemed inconsistently drawn in relation to their counterparts:

• The Enter icons have a full doorway, but the Exit icons do not.
• The Fullscreen icon has four arrows; the Minimize icon uses chevrons instead.

There could be more; those were just the ones I noticed while scrolling through the list on my phone. ;)

How can I contribute?

I use system-uicons daily, and I would like to contribute to the gituhb, but there is no CONTRIBUTING.md or info regarding contributing.

I have a lot of SVG icons that I am willing to contribute, but how can I do that?

Request: sun & moon icons

These icons look stunning, thank you so much for making these available! I don't know if you take requests, but a sun & moon icon to indicate light and dark mode (like the ones on https://corey.ginnivan.net/) would be great!

Transform properties are getting in the way when wanting to animate with CSS

Hey! Thanks a lot for this amazing set of icons.

While wanting to animate some of the icons, I wanted to use transforms. I noticed that there were transforms set on some of the paths (checkbox_empty) any reason these are not applied to the path coordinates? (can easily be done with SVGo) I thought I'd ask if it was by design, before I apply them for my own use case.

Add more box icons

Hey,

there is a Box and Box (Open) icon already. I’d be nice to have

• a Boxes icon (like a little box pyramid)
• a Box (Add) icon (a box with a plus sign)

Thank you for your time :)

Globe SVG Title

Title displayed on the Globe icon is "Blobe".

Contribute: Created a NuGet package

Hi.

I just created NuGet package that bundles the icons for use in Asp.Net applications

https://www.nuget.org/packages/SystemUIcons.TagHelper

It was created with MIT license, but i switched to the Unlicense model for reasons ( mostly to follow the icons license )

Next batch

When is the next batch coming?

In tickets from august, you are referencing this "Next batch"... Thats 4 months ago.

'Clock' icon isn't there

On the name of clock, only the 'alarm clock' is there.

I'd love to see a clock icon.

Community React library

Hi @CoreyGinnivan! 👋 Thanks for this amazing project! I've been having an eye on this project for a while and I finally got to work with it. It's a pleasure.

I noticed that there is an unfinished effort to create React components from one year ago (#3). I needed something finished and maintained though so I just created and published this: https://github.com/adeira/icons 😎

yarn add @adeira/icons

The way how it's written, final goals, and thinking around this project are a bit different but I believe some people might find it useful. The question is, would you please consider mentioning this community project somewhere? I can send a PR.

BTW, I followed your steps and also released the library under "The Unlicense" license. ❤️

Thanks for considering my question and thanks again for making this project available to the rest of the world.

Home icon is missing

Hi! First of all, awesome work! 🙇‍♂️ Thanks for sharing as it's very useful for my pet projects and I like a lot the style of the icons. :)

I saw that the preview image from Twitter is showing a Home icon but, while searching it in the catalogue, it seems that the Home icon is missing.

Could you please add it to the catalogue? Thanks!

Light/Day & Dark/Night Icons

It'd be awesome to have icons for switching between light and dark contexts, like a day/night icon.