SVG icon library for the Carbon Design System
Home Page: https://www.carbondesignsystem.com/guidelines/iconography/library
License: Apache License 2.0
Hello,
Any plan to distribute this carbon-icons as font icon ( i.e. like fontawesome ) ? As font-icon, it's much easier for us to style the icon ( e.g. color, size, weight, etc. ).
When we have SVG of the icon, we can generate font-icon using icomoon.io for example.
Thanks.
Hi!
The name of this icon is "success". It's a checkmark inside of a circle. It's going to represent when an action/event is successful. The following .zip file has the svg and an image of it in use.
How about providing them as simple github/wiki pages?
I have a project that has a dependancy on carbon-icons version 6.3.0.
There is a file called carbon-icons-list.js in the dist folder that contains ES6 code and is currently breaking the pipeline of my project.
lerna ERR! at /node_modules/carbon-icons/dist/carbon-icons-list.js:1:0
lerna ERR!
IBM Blockchain Platform
SDK
We need an icon to signify SDKs for fabric development so users will be able to quickly and succintly identify what they can expect at a glance.
I would create this myself if I had the building blocks for the type.
Example of something similar
Need to add new glyph icons for table.
table-icons.zip
Various pos icons in SVG at different sizes pos.zip
Note that these are service icons and should be handled by internal IBM service broker
'iconAddSolid' was not found in 'carbon-icons'
'iconCheckmarkSolid' was not found in 'carbon-icons'
Creating new React Application include carbon-icons library but below error its comes.
Please add the following screen shots to this issue:
As we are moving forward with rebranding of OpenWhisk we will need a different icon for it on Bluemix menu:
The idea is to replace with this one:
Is it ok? Should I made changes?
Can I send the SVG?
There is no LICENSE for this repository. package.json shows the license as ISC. Is that accurate?
This issue is for discussing about the names of ESM exports.
Currently the ESM exports are named from icon ID, converted from hyphenated to camel case (with s.replace(/\-+([A-z])/g, (match, token) => token.toUpperCase()) logic).
Icon IDs have icon—${filename} naming rule from what I read: https://github.com/carbon-design-system/carbon-icons/blob/5984bca/gulp-tasks/build-sprite.js#L9.
@joshblack is interested in figuring out a better naming.
This error message shows up when trying to download an icon from Firefox. We need to make sure that the SVG's include namespaces:
Make sure you always declare the namespaces you use in your XML files. If you don't, user agents such as Firefox won't recognize your content and will simply show the XML markup or inform the user that there's an error in the XML. . . .
More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course
The name of the icon is "running". It's going to be used while an action/event is still running and hasn't completed yet. The following .zip has the svg and an image of its use case.
The name of the icon is "queued". It's going to be used while an action/event is pending or in the queue to be executed. The following .zip has the svg and an image of what it looks like.
For our v10 release, we'll need to create a migration guide for @carbon/icons and officially deprecate this package.
Should we also include an FAQ for handling common questions for teams using this package?
This link this broken: http://carbondesignsystem.com/style/iconography/library
Describe in detail the issue you're having.
It would appear a few of the icons missed the 45 degree inside corners
Is this a feature request (new component, new icon), a bug, or a general issue?
bug
What version of the Carbon Design System are you using?
9.0.0
Creating an icon for the new "Logging and Monitoring" section in the Hamburger menu.
Here is the SVG designed and exported on the pixel grid. Let me know if you need anything else.
@tay-aitken
The name of the icon is "build". It's going to be used when building something. The following .zip has the svg and an image of what it looks like.
build.zip
Hello, while trying to import an icon in react I stumbled upon this error. Using iconAdd works, but using iconRenew doesn't.
Failed to compile
./src/Pages/Payments/Payments.js
Attempted import error: 'iconRenew' is not exported from 'carbon-icons'.
This error occurred during the build time and cannot be dismissed.
The GitHub issue template is not properly formatted, causing prettier to throw an error when the ci-check script runs
Trying to use carbon-icons via unpkg cdn causes error because it's expecting to find carbon-icons.js at root.
Links under Usage header in https://github.com/IBM/carbon-icons/blob/master/docs/usage.md lead me to 404's, here are some examples:
master branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://github.com/carbon-design-system/carbon-icons.
Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.
Good luck with your project ✨
Your semantic-release bot 📦🚀
https://ibm.box.com/s/bvtq3t5ux5aox44fvg1kha4sy2ozulhw
https://ibm.box.com/s/g0qdjbirzvzmk3l24z7xwsmaqswfq1op
Rather than having multiple <circle> and <path> nodes, merging all shapes into a single <path> would greatly simplify the distributed JSON and JS.
The name of the icon is "deploy". It's going to be used when deploying code. The following .zip has the svg and an image of what it looks like.
deploy.zip
in the readme and in the actual code (server.js) it says:
app.use(express.static('node_modules'));
this should not be suggested or used, it should be:
IBM Watson Studio
Legend
The legend icon is intended for a visualization's legend; A visualization legend is used to identify data by color, icon, shape, size and other key features.
In Watson Studio's case, we have a legend within a panel and need to have an icon to represent the visualization's legend. A user is able to click the icon to open, enable, or close the panel.
https://ibm.box.com/s/l0h6mvt5i0gm8jhcnglz8nftbbb7gaba
Please let me know if this link does not work.
With pixel grid:
I am having a couple of issues with the 16 px icon design. The left 16 px icon is the minimized version of the 32 px icon (far right icon), but the middle item (square and line) falls on a half pixel. The middle 16 px icon is pixel perfect, but does not fall vertically centered within 16 px. The question I have is which 16 px icon design is correct / should I go with? Thanks in advance!
Without pixel grid:
In context:
I have a project that has a dependency on carbon-icons version 6.3.0.
There is a file called carbon-icons.js in the dist folder that contains ES6 code and is currently breaking the unit tests of my project.
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
SyntaxError: Unexpected token '>'
at tests/ui/test_index.js:49717 <- webpack:///~/carbon-icons/dist/carbon-icons.js:2649:0
This seems to be caused by the following arrow function (code from node_module folder)
function camelCaseFromHyphnated(s) {
return s.replace(/-+([A-z])/g, (match, token) => token.toUpperCase());
}
We are using the filter icon (the funnel) but in the IDL IBM Icons(16px, 20px) library the 16 px version is the old settings icon.
Here are the libraries I have installed. Thanks.
icon--back-to-top, icon--download have centered single px stroke; icon--back-to-top cropped artboard is 11px, but will still be placed in 16px wide and will still straddle a px border. icon--download has a border straddling 1px stroke in prod. there may be others.
Bug
Some icons are missing from the Carbon Design System website but their SVG is available in the repo and can be used.
For instance, I'm using 3 icons in here: https://codesandbox.io/s/6lp7w5p953 that can't be found when you search for them on the Iconography page.
WCA (mobile)
mobile, multi-channel (icon--multi-channel), social-ads (icon-social-ads)
Please briefly describe what the icon is supposed to represent and the use case(s) its being used for.
Don't have "Template sketch file"
Screen Shot
=============
Existing "icon--mobile" is not compatible. So not sure what new name would be.
The date picker icon is not available in the iconography.
Both are open-source and very similar.
It would be better to have one combined icon library.
The name of the icon is "fail". It's going to be used when an action/event fails. The following .zip has the svg and an image of what it looks like.
fail.zip
It is a very convenient format.
Overview
This icon is based on and the opposite of the "View" icon in the IBM design language icon library. The icon is used to toggle the visibility of a text field commonly used for sensitive keys or passwords. The icons is designed to be the on/secure/hidden state of the normal View icon.
Background
I had a need for this icon in Schematics and created this as a one-off that's currently in production. Morgana D'Almeida had the same need for Cloud functions and ended up created a very similar icon on her own. I'm sure other teams will have a need for this in the future.
Current icon used in Schematics
SVG
<svg width="22" height="16" viewBox="0 0 22 16" xmlns="http://www.w3.org/2000/svg">
<title>
Artboard
</title>
<path d="M18.26 3.802c1.502 1.22 2.77 2.704 3.74 4.378-2.3 3.9-6.1 7-11 7-1.204 0-2.4-.193-3.542-.575l1.622-1.623c.632.13 1.275.197 1.92.198 4.3 0 7-2.7 8.6-5-.762-1.122-1.69-2.123-2.75-2.97l1.41-1.408zM3.8 12.607C2.27 11.377.982 9.877 0 8.18c2.3-3.9 6.1-7 11-7 1.232 0 2.457.203 3.622.604l-1.61 1.61c-.662-.14-1.337-.214-2.012-.214-4.3 0-7 2.7-8.6 5 .777 1.143 1.725 2.16 2.81 3.015L3.8 12.607zM8 8.18c0-1.657 1.343-3 3-3 .07 0 .136.016.205.02L8.02 8.385C8.017 8.315 8 8.25 8 8.18zm3 3c-.036 0-.07-.01-.106-.01l3.095-3.097c0 .036.01.07.01.107 0 1.656-1.344 3-3 3zm2.72-4.25L9.75 10.9l-1.785 1.784-1.523 1.522-1.527 1.528L3.44 14.38l1.178-1.18 1.43-1.43 2.27-2.27 4.003-4 1.796-1.795 1.518-1.518 2.01-2.01 1.487 1.34L17.45 3.2l-1.43 1.43-2.3 2.3h.002z" fill-rule="nonzero" fill="#000"/>
</svg>
IBM Studios Hamburg
City Icons / Hamburg
The city icon is derived from the blazon of Hamburg. As Hamburg is a major location in IBM DACH and an IBM Garage location, we as IBM Studios Hamburg firmly believe, that a dedicated icon is needed.
https://ibm.box.com/s/jlpxk38swf80cu88z6uot4l82gynpw6j
I'm getting 404 when I click this: http://carbondesignsystem.com/style/iconography/library
It would be nice to have SVG files have pretty-printed XML
master branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://github.com/carbon-design-system/carbon-icons.
Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.
Good luck with your project ✨
Your semantic-release bot 📦🚀
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.