radix-ui / icons Goto Github PK
View Code? Open in Web Editor NEWA crisp set of 15×15 icons designed by the @workos team.
Home Page: https://radix-ui.com/icons
License: MIT License
A crisp set of 15×15 icons designed by the @workos team.
Home Page: https://radix-ui.com/icons
License: MIT License
A cookie icon would be awesome! 🍪
Either a floppy disc or some other kind of icon which stands for explicitly saving a state would be nice.
Hi, great set of icons, however npm install @modulz/radix-icons
and import { SunIcon } from '@modulz/radix-icons';
(using just 1 icon) adds 75KB to the production build (using create react app). This makes them kind of unusable as an npm install.
Consider making each icon its own file in the build process so can do something like import { SunIcon } from '@modulz/radix-icons/sun-icon';
The app instantly crashed on "+" input - tested on firefox and chrome
Just as there are Pin and PinFilled icons, there should be a bookmark filled icon variant to represent a "bookmarked" state.
Hi, I love the icons. To change them faster in the application I created this component, which could be default export of the application maybe. It simply returns the appropriate component after searching in all exports.
import * as Icons from "@modulz/radix-icons"
export const Icon = React.forwardRef(({ children, name, ...props }, ref) => {
if (name) {
const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1)
const modified = name
.split(" ")
.map(e => capitalize(e))
.join("")
const id = `${modified}Icon`
const available = Object.keys(Icons)
if (available.includes(id)) {
const Icon_ = Icons[id]
return (
<Icon_ {...props} ref={ref}>
{children}
</Icon_>
)
}
}
return <></>
})
export default Icon
Usage:
<Icon name="layers" />
<Icon name="zoom in" />
Would love a simple version of thePolywork logo.
I don't believe it's used or needed so we should remove it.
Not an issue, but do you plan on iconjar package? Or possibly grouping icons inside folders for easier organization? Thanks.
Hi! It's possible to use react-figma for creating universal react components that can be used on Figma (rendering icons to document through plugin) and on the web. I can make PR if are you interested.
Consumers cannot attach ref
s to any of the icons atm. This is causing errors when trying to use the icons via the as
prop in some of the Radix Primitives.
Click the button below to see the error:
https://codesandbox.io/s/hopeful-rain-gkrg7?file=/src/App.tsx
Hi team.
thank you guys create this project.
I want to know if you have plans to open source the website code?
It’d be great to have a star icon, maybe something similar to GitHub’s star icon. Thanks.
Hi,
Could you please export the twitter and the camera icon as fills?
Some exporting tools like Iconmoon does not support strokes at the moment
appreciate for previous work #46 it's help me a lot ,but now now some new probelm appear. icon pack can't find a suitable icon to express flex 'align-items'.could implement it in spare time
Hi, I really like this icon set, the design ascetics are on point! It'd be great to have a line chart icon to use with the bar chart and table icons.
Also more data related icons in general would be useful as well. For example icons for: data (to represent raw data not in any form), processing data, scatter plot, bubble chart, pie chart, and area chart. Thanks!
https://www.npmjs.com/package/@radix-ui/react-icons
Which of these is the correct package?
npm install @modulz/radix-icons
or
npm install @radix-ui/react-icons
beautiful web sites and categoryed icons. pls extend flex layout icon will better for current front dev sence(most fontend developer are used it).
there missing space-between,space-around in alignment.
https://developer.mozilla.org/de/docs/Web/CSS/justify-content
https://developer.mozilla.org/de/docs/Web/CSS/align-items
The sun and moon icons work great as light and dark mode icons, but there is also auto dark mode which uses the system dark mode preference.
It'd be great to have a version of the sun and moon icons that indicates the site is in auto dark mode so it's easy to represent the 3 states (always light mode, always dark mode, auto dark mode). My suggestion would be to add a capital letter "A" to the lower right corner of the existing sun and moon icons to indicate auto mode. Thanks!
I'd love to be able to use some of these icons as a cursor.
e.g.
import pencil from @radix-ui/icons/pencil-1.svg?raw';
const CustomCursor = styled('div', {
cursor: `url("data:image/svg+xml,${pencil}") 0 15, pointer`
});
However this would require:
@radix-ui/icons
with the raw SVG icons or including the raw SVG assets with the existing react-icons package (they are not bundled at present)/Hi, it'd be great have a timeline icon. Thanks!
There is a margin
icon, but not a padding
one. It would be nice to also have the padding
variant.
If you type ?
in the search input field if breaks the site and a message saying An unexpected error has occurred.
shows up.
Hello everyone,
I'm using Radix icons on a project of mine, and I was surprised to see that there's no ❤️ icon yet?
I'm going to open a PR in order to fix that.
Thanks :)
It'd be great to have a data graph icon. There is a Table
icon which I can use for data in table format, and it'd be great to have a corresponding data in graph format icon (maybe something with lines or bars). Thanks!
Hey ✌️
I noticed that none of the icons have a <title>
element inside the <svg>
, which acts as alternative text for screen readers. It would be great to add something like this for the generated icons:
<svg aria-labelledby="arrowLeftIcon">
<title id="arrowLeftIcon">Arrow left icon</title>
// actual svg implementation
</svg>
I think there would have to be some changes made to the generate-icon-lib package, which I'm happy to do with some direction!
A direction icon, can for example be used for an input showing the direction of a gradient (left -> right
, bottom-left -> top-right
). Maybe a compass-inspired icon?
A sparkly wand like the auto-adjust icon for filtering images on mobile apps like Instagram.
Curious to know how you arrived at these base dimensions, rather than the more popular 16x16. I assume it has something to do with "crispness", forcing most lines to fall on physical pixels?
Hi, thanks for creating these icons I've found them very useful!
However, a lot of them have implied padding making them difficult to work with. By implied padding I mean that the icon does not go to the edge of the svg. As a user my expectation is that the long dimension of the icon goes to the edge of the svg. For example, using a standard 15x15 svg, the size of the GitHub icon is 13.3x12.97, and the size of the Zoom in/out icons are 11x11.
As a user it is easy for me to add padding/margin outside the svg if I need it. And it is also easy to shrink the svg, for example if the Zoom icons were 15x15, but I needed an 11x11 I could just set width="11" height="11"
. But what is not easy is removing the implied padding if I need the icon to go to the edge of the svg, the only way I found to do this is to use transform: scale(...)
.
For example, here's the GitHub icon next the Sun icon (which doesn't have implied padding):
Here's the pair with focus styles applied:
Fixed - here's the pair with transform: scale(1.1333333)
applied to the GitHub icon:
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.