Cryptocons is a collection of icon components and utility functions that make it easier to manage cryptocurreny icons in your React project. Each icon is placed on a 24x24 grid and available as two types:
- Logo: Plain logomark icons
- Badge: Logomark icons contained in a shape that can be configured with different border radiuses from square to circle.
Once the package is installed, importing and using icons is pretty simple. They are available as CommonJs or ES modules.
Each icon is wrapped in a
forwardRef that exposes the underlying SVG element as a ref. Any valid SVG properties can be added to a cryptocon.
Changing icon size
Aside from regular SVG properties, each icon has access to a small set of custom properties. One of them is
size. The size property is equivalent to setting the height and width of the SVG. The following examples are all fuctionally the same.
Changing badge radius
Another component property exclusive to Badge icon types is
badgeRadius will round the corners from a square to a circle depending on the number. Setting a badgeRadius on an icon that isn't a Badge will have no effect. The default radius is 8.
There are three available higher order components that bundle available
cryptocons into a single component and that can be rendered using the
All available icons can be rendered with the
Only Badge icons will be autocompleted with intellisense or available to render with the
Only Logo icons will be autocompleted with intellisense or available to render with the
Creating custom cryptocons
There are two methods for creating your own cryptocons.
The Icon component
The Icon component renders an SVG element to create custom cryptocons on the fly. The Icon component will need supplied a
The createIcon convenience function
createIcon function is a convenience wrapper around the Icon component allowing you to achieve the same result with less effort. The mandatory
0 0 24 24 when using the
Cryptocon icons assume decorative intent. What this means is icons have
focusable="false" set by default. It's favorable to let assistive technology instead of the icon recognize parent elements. SVG elements with an
aria-label are more verbose because they are announced as a group, so it's favorable to go with
aria-label on the primary interactive parent element.
When icons are wrapped by an interactive element, what’s important is that the link has informative text. Therefore, if a component can be described by visible text, it is recommended to reference that text with an
aria-label attribute rather than using the
Suppose the icon is being used as a standalone interactive element and isn't accompanied by a visible text label. In that case, it's best to use a combination of
aria-label, and ensuring the icon can be discovered by assistive technology by setting