Resources
Icon gallery
Every icon in the icon registry, with search by name and keyword, size and stroke preview, and copy of the name and the JSX.
The gallery is generated at build time from the icon registry in the @bigbang/icons package. Every icon added to the registry appears here by itself; an icon that is not in the registry cannot be used in products either. For usage rules, see Iconography.
Search by name or keyword, for example "delete" or "calendar".
Tabler is the second set; it can be chosen here once one of its icons is registered.
Showing 55 of 55 icons
- align-center
- align-left
- align-right
- arrow-down
- arrow-left
- arrow-right
- arrow-up
- bell
- bold
- calendar
- check
- chevron-down
- chevron-left
- chevron-right
- chevron-up
- chevrons-up-down
- circle-alert
- circle-check
- circle-help
- circle-x
- clock
- copy
- download
- ellipsis
- ellipsis-vertical
- external-link
- eye
- eye-off
- file
- filter
- home
- info
- italic
- layout-grid
- list
- lock
- log-out
- menu
- minus
- moon
- pencil
- phone
- plus
- refresh
- search
- settings
- star
- sun
- trash
- triangle-alert
- underline
- upload
- user
- x
Selected icon
align-center<Icon name="align-center" />- Keeps its direction in right-to-left text.
- The stroke width products use.
Source: Lucide 1.59.0, ISC (Feather-derived icons MIT)
Keyboard: Tab into the grid and move between icons with the arrow keys; Home and End go to the start and end of the row, and with Ctrl to the start and end of the list.
Select an icon and use Copy JSX to get the line to use. Products use icons only through the Icon component:
import { Icon } from '@bigbang/ui';
<Icon name="calendar" size="sm" />;- The Size buttons are the
xs–xlsizes of theIconcomponent (12, 16, 20, 24 and 32 px). The defaultmd(20 px) is left out of the copied line. - Stroke width is a preview only. Products use 2 in every brand; it cannot change until the brand pack adds a stroke setting.
- The Set list shows the sets in the registry. Lucide is the default set; Tabler is the second set and can be chosen here once one of its icons is registered.
- Icons that flip in right-to-left text (arrows and icons that point along the reading direction) say so in the selected icon panel.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Moves from the search field to the size, stroke and set choices, then into the grid. The grid has one tab stop. |
| Arrow keys | Move between icons in the grid and select the icon reached. |
| Home, End | Go to the first and last icon of the row. |
| Ctrl + Home, Ctrl + End | Go to the first and last icon of the list. |
New icon
Section titled “New icon”If the icon you need is missing, follow Iconography · Adding a new icon. Once it is in the registry, the gallery shows it from the next build.