jb-icon
jb-icon-expand and jb-icon-refresh emit a non-bubbling init event when connection setup finishes. Register listeners before inserting the element into the document.
Icon component for the JB Design System. jb-icon has no default export. it has some sub folder each contain one icon.
Every icon extends the SSR-safe JBBaseComponent, and custom-element registration is guarded. Icon submodules can therefore be imported while rendering in Node.js environments such as Next.js or Astro without requiring HTMLElement, window, or customElements. Their shadow DOM and animations initialize only when the elements are upgraded in a browser.
Demo
React JSX types
React applications can opt in to JSX declarations for every icon with one type-only helper import. Continue importing each icon separately so only the icons used by the application are registered and bundled. See the React JSX demo.
import "jb-icons/react";
import "jb-icons/triangle";
export function DisclosureIcon({ isOpen }: { isOpen: boolean }) {
return <jb-icon-triangle direction="inline-end" spin={isOpen ? 90 : 0} round={60} size="xs" />;
}The jb-icons/react runtime entry is empty. Non-React projects do not need to
import it and do not resolve any React types.
The declaration includes the shared size, color, class, standard HTML,
ARIA, children, and ref props. It also exposes each icon's public properties:
| Icons | Additional React JSX props |
|---|---|
arrow |
direction, spin, end-line |
arrow-tailed |
direction, spin, long |
triangle |
direction, spin, round |
check |
isChecked, checked |
delete |
isOpen |
edit |
isActive, active |
expand |
isExpanded, expanded |
eye |
open |
refresh, search |
isLoading |
Remove any application-local declarations for the same jb-icon-* JSX
elements after opting in, because duplicate declarations with different types
can conflict.
Size and variants
Every icon supports a size attribute and property. Sizes set only the icon height;
width remains automatic and follows the SVG's aspect ratio.
The shared size rules live in style/variables.css and are injected into every
icon component before its icon-specific styles. The resolved height is available
as the --icon-size custom property. Compare the available sizes in the sizes demo.
| Size | Default height | CSS custom property |
|---|---|---|
xs |
1rem (16px) | --jb-icon-size-xs |
sm |
1.25rem (20px) | --jb-icon-size-sm |
md |
1.5rem (24px) | --jb-icon-size-md |
lg |
1.75rem (28px) | --jb-icon-size-lg |
xl |
2.25rem (36px) | --jb-icon-size-xl |
md is the default when size is omitted. Its no-attribute size can be
customized with --jb-icon-size; an explicit size="md" uses
--jb-icon-size-md.
<jb-icon-search></jb-icon-search>
<jb-icon-search size="sm"></jb-icon-search>
<jb-icon-search size="xl"></jb-icon-search>Override one or more size tokens from an application stylesheet:
:root {
--jb-icon-size: 1.5rem;
--jb-icon-size-xs: 0.875rem;
--jb-icon-size-sm: 1.125rem;
--jb-icon-size-md: 1.5rem;
--jb-icon-size-lg: 2rem;
--jb-icon-size-xl: 2.5rem;
}--icon-size is internal to each icon and contains the resolved height. Prefer
the public --jb-icon-size* properties when customizing icons.
Stroke width
Stroked icons use the shared 1024-unit weight scale from style/variables.css; the stroke-width demo shows the three weights side by side.
| Weight | SVG units | Internal custom property |
|---|---|---|
| Thin detail | 48 | --icon-stroke-width-thin |
| Standard outline | 64 | --icon-stroke-width |
| Thick emphasis | 96 | --icon-stroke-width-thick |
Use the standard weight for primary outlines. Thin and thick weights are reserved for secondary details and intentional visual emphasis.
Color
Icons inherit the surrounding text color by default through currentColor. See every theme variant in the colors demo:
<div style="color: rebeccapurple">
<jb-icon-search></jb-icon-search>
</div>Use the shared --jb-icon-color custom property to customize all JB icons in a
scope:
:root {
--jb-icon-color: #334155;
}Icons also support these color attribute variants:
| Color | Theme fallback | CSS custom property |
|---|---|---|
primary |
--jb-primary |
--jb-icon-color-primary |
secondary |
--jb-secondary |
--jb-icon-color-secondary |
positive |
--jb-green |
--jb-icon-color-positive |
danger |
--jb-red |
--jb-icon-color-danger |
warning |
--jb-yellow |
--jb-icon-color-warning |
light |
--jb-neutral-10 |
--jb-icon-color-light |
dark |
--jb-neutral |
--jb-icon-color-dark |
<jb-icon-search color="primary"></jb-icon-search>
<jb-icon-search color="danger"></jb-icon-search>Each variant first uses its --jb-icon-color-* property, then its corresponding
JB theme color, and finally currentColor. Without a color attribute, the
icon uses --jb-icon-color and falls back directly to currentColor.
Icons
Plus and minus icons
Import the number control icons from their submodules:
import "jb-icons/plus";
import "jb-icons/minus";Both icons use the standard 1024-unit view box, stroke weight, size variants, and color variants:
<jb-icon-plus size="sm" color="positive"></jb-icon-plus>
<jb-icon-minus size="sm" color="danger"></jb-icon-minus>Check icon
Import the check icon from its submodule:
import "jb-icons/check";The check draws its mark like a pen stroke and erases it back to nothing. It uses
the shared 1024-unit view box, stroke weight, size variants, and color variants,
and its mark keeps the same 45° shape as the jb-checkbox check mark:
<jb-icon-check></jb-icon-check>
<jb-icon-check checked></jb-icon-check>
<jb-icon-check size="sm" color="positive"></jb-icon-check>Switch between the two animations with the isChecked property, or call the
methods directly when you need the returned animation:
const checkIcon = document.querySelector("jb-icon-check");
// draws the mark
checkIcon.isChecked = true;
// erases it back to nothing
checkIcon.isChecked = false;
// or play a specific animation and await it
await checkIcon.playCheckAnimation().finished;
await checkIcon.playUncheckAnimation().finished;| Member | Type | Description |
|---|---|---|
isChecked |
boolean |
Switches between the check and uncheck animations and reflects the checked attribute. |
checked |
attribute | Declarative form of isChecked. |
playCheckAnimation() |
() => Animation |
Draws the mark from nothing and returns the mark animation. |
playUncheckAnimation() |
() => Animation |
Erases the mark back to nothing and returns the mark animation. |
playCheckAnimation() always draws from nothing and playUncheckAnimation()
always erases from the fully drawn mark, so both methods also work as replays.
When an animation is still running, the next one continues from its current
position instead of snapping. Both methods keep isChecked synchronized.
Markup that already contains checked renders the whole mark without animating,
which keeps server-rendered and framework-rendered icons stable. Call
playCheckAnimation() when you also want the draw to play on the first render.
The draw copies the rhythm of a hand-written check: the short stroke is written first with an ease-out, the pen pauses briefly at the corner, and the long stroke follows with a slow start, a swift middle, and a soft landing at the tip. The two strokes take 420ms and a press feedback peaks as the tip lands; the erase wipes the long stroke away first and the short one last in 280ms. When the user prefers reduced motion, both animations jump straight to their end state.
Arrow-tailed icon
The gallery demo shows the short and long tail alongside every supported direction.
Import the tailed arrow from its submodule:
import "jb-icons/arrow-tailed";The default arrow has a short tail and square visual bounds. Add the boolean
long attribute, or set its property, to use the full-height tail:
<jb-icon-arrow-tailed></jb-icon-arrow-tailed>
<jb-icon-arrow-tailed long></jb-icon-arrow-tailed>const arrow = document.querySelector("jb-icon-arrow-tailed");
arrow.long = true;Lorgnette icon
The gallery demo includes the lorgnette with the shared size and color variants.
Import the lorgnette icon from its submodule:
import "jb-icons/lorgnette";Use the shared size and color variants. Its lens highlights use the complementary icon color:
<jb-icon-lorgnette></jb-icon-lorgnette>
<jb-icon-lorgnette size="sm" color="primary"></jb-icon-lorgnette>jb-icon-lorgnette {
--jb-icon-color-complementary: #ff1229;
}Expand icon
Try its expanded and collapsed states in the animation demo.
Import the expand icon from its submodule:
import "jb-icons/expand";Set isExpanded to animate between the expand and collapse states:
const expandIcon = document.querySelector("jb-icon-expand");
expandIcon.isExpanded = true;Edit icon
Try its active and resting states in the animation demo.
Import the edit icon from its submodule:
import "jb-icons/edit";The pen uses the standard icon color, while its animated underline uses the complementary icon color:
<jb-icon-edit></jb-icon-edit>
<jb-icon-edit size="sm" color="primary"></jb-icon-edit>Customize the underline with --jb-icon-color-complementary:
jb-icon-edit {
--jb-icon-color-complementary: #ff1229;
}Set isActive to animate between the resting and active edit states:
const editIcon = document.querySelector("jb-icon-edit");
editIcon.isActive = true;Delete icon
Try its open and closed lid states in the animation demo.
Import the delete icon from its submodule:
import "jb-icons/delete";Use the shared size and color variants on <jb-icon-delete>:
<jb-icon-delete></jb-icon-delete>
<jb-icon-delete size="sm" color="danger"></jb-icon-delete>Set isOpen to animate the bin lid between its open and closed states. The
animation is triggered programmatically and is not tied to hover:
const deleteIcon = document.querySelector("jb-icon-delete");
deleteIcon.isOpen = true;
// Close it again:
deleteIcon.isOpen = false;The playOpenAnimation() and playCloseAnimation() methods remain available
and keep isOpen synchronized.
Refresh icon
Try its loading state in the animation demo.
Import the refresh icon from its submodule:
import "jb-icons/refresh";<jb-icon-refresh></jb-icon-refresh>
<jb-icon-refresh size="sm" color="primary"></jb-icon-refresh>Set isLoading to true to start rotating the icon. Setting it back to
false does not interrupt the active rotation; the icon finishes that cycle
and then stops repeating:
const refreshIcon = document.querySelector("jb-icon-refresh");
refreshIcon.isLoading = true;
// When refreshing finishes:
refreshIcon.isLoading = false;Search icon
Try its loading state in the animation demo.
Import the search icon from its submodule:
import "jb-icons/search";Use the shared size and color variants on <jb-icon-search>:
<jb-icon-search></jb-icon-search>
<jb-icon-search size="sm" color="primary"></jb-icon-search>Set the isLoading property to animate the search icon while a search is in
progress. Reset it to false to finish the animation and return to the search
shape:
const searchIcon = document.querySelector("jb-icon-search");
searchIcon.isLoading = true;
// When the search finishes:
searchIcon.isLoading = false;Eye icon
Try its open and closed states in the animation demo.
Import the eye icon from its submodule and use the open attribute or property
to switch between hidden and visible states:
import "jb-icons/eye";<jb-icon-eye></jb-icon-eye>
<jb-icon-eye open></jb-icon-eye>const eye = document.querySelector("jb-icon-eye");
eye.open = true;Related Docs
- See the React JSX documentation for typed JSX usage.
- See the
jb-icons/reactREADME for React-specific guidance. - See All JB Design System Component List for more components.
- Use Contribution Guide if you want to contribute to this component.
AI agent notes
- Import
jb-icons/icon-nameonce before using<jb-icon-name>.