Icon

Overview

The Icon component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.).

It handles Bulma sizing, colors, helper props, and accessibility. You can use it standalone or inside other components (like Button, Tag, or IconText).

info

Font Awesome is the default icon library, but you can use Material Design Icons, Ionicons, Google Material Icons, or Material Symbols by changing the library prop. For setup instructions, see Alternative Icons.

note

name accepts the icon name with or without its library prefix — name="fa-check" and name="check" render identically for library="fa" (likewise mdi- for library="mdi"), so pasting an icon name straight from Font Awesome's or MDI's own docs just works. Since library already defaults to 'fa', you rarely need to set it explicitly.

Import

import { Icon } from '@allxsmith/bestax-bulma';

Usage

Default Icon (Font Awesome)

The simplest use of the Icon component, displaying a Font Awesome star icon. The ariaLabel prop provides an accessible name for the icon.

<Icon name="star" ariaLabel="Star icon" />

Font Awesome Large

You can use the variant and features props for Font Awesome-specific styling. In this example, variant="solid" specifies the icon style and features="fa-2x" increases the icon size to 2x its normal size.

<Icon
  name="star"
  variant="solid"
  features="fa-2x"
  ariaLabel="Star icon large"
/>

Spinning Icon

The features prop can be used to add Font Awesome modifiers like fa-spin for animated icons. This example shows a spinning loading icon with increased size.

<Icon
  name="spinner"
  variant="solid"
  features={['fa-spin', 'fa-2x']}
  ariaLabel="Loading spinner"
/>

Bordered

You can add a border to the icon using Font Awesome's fa-border class via the features prop. This is useful for icons that need to stand out or be visually separated.

<Icon
  name="star"
  size="large"
  variant="solid"
  features={['fa-border', 'fa-2x']}
  ariaLabel="Star bordered"
/>

With Text Color

Set the icon color using the textColor prop. For example, textColor="primary" applies Bulma's primary color to the icon.

<Icon
  name="star"
  textColor="primary"
  ariaLabel="Star icon with primary text color"
/>

With Margin

You can use Bulma spacing helpers like m to add margin around the icon for better layout control.

<Icon name="star" m="2" ariaLabel="Star icon with margin" />

With Container Size

The size prop adjusts the size of the icon container. Use size="large" for a bigger icon wrapper, which is useful for emphasis or visual hierarchy.

<Icon name="star" size="large" ariaLabel="Star icon large container" />

Google Material Icons

Use Google's official Material Icons with different styles available through variant.

<Block display="flex" alignItems="center">
  <Icon library="material-icons" name="favorite" ariaLabel="Filled heart" />
  <Icon
    library="material-icons"
    name="favorite"
    variant="outlined"
    ariaLabel="Outlined heart"
  />
  <Icon
    library="material-icons"
    name="favorite"
    variant="round"
    ariaLabel="Round heart"
  />
</Block>

Material Symbols

Google's newest icon system with modern design and comprehensive coverage.

<Block display="flex" alignItems="center">
  <Icon
    library="material-symbols"
    name="settings"
    ariaLabel="Settings outlined"
  />
  <Icon
    library="material-symbols"
    name="settings"
    variant="rounded"
    ariaLabel="Settings rounded"
  />
  <Icon
    library="material-symbols"
    name="settings"
    variant="sharp"
    ariaLabel="Settings sharp"
  />
</Block>

Material Design Icons

Comprehensive Material Design icon library with thousands of icons.

<Icon library="mdi" name="home" ariaLabel="Material Design home icon" />

Ionicons

Modern icon library with web components support, perfect for mobile-first applications.

<Icon library="ion" name="settings" ariaLabel="Ionicons settings icon" />

Custom node

Pass children instead of name to render any node — an inline SVG, a react-icons component, <FontAwesomeIcon />, … — in place of a class-based glyph. name and children are mutually exclusive; size, textColor, bgColor, ariaLabel and containerClassName behave identically to the name path, while library, variant, features and libraryFeatures are ignored since there's no class-based glyph to style.

children deliberately excludes undefined, so write a conditional icon as cond ? <MySvg /> : null (or cond && <MySvg />) rather than cond ? <MySvg /> : undefined — the latter is a type error, because the renderer discriminates on children !== undefined and would otherwise fall through to the name path with no name.

<Icon ariaLabel="Custom SVG icon" textColor="primary">
  <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor">
    <circle cx="8" cy="8" r="6" />
  </svg>
</Icon>

Accessibility

ARIA label: ariaLabel defaults to 'icon' and is applied to the container span unconditionally — an Icon that never sets it still renders aria-label="icon". For an icon-only control, put the real aria-label on the control (e.g. Button) and set aria-hidden on the Icon; for a decorative icon beside visible text, set aria-hidden on the Icon so it doesn't add "icon" to the accessible name.
Keyboard: If interactive, use with Button or a and put the ARIA (aria-label, roles) on that control.
Color and size: Use textColor, bgColor, and size for accessible, themeable icons.

note

For purely decorative icons, you can use aria-hidden="true" via the ...rest props.

IconText: For icons with adjacent text.
Button: For buttons with icons.
Card: For cards with header icons and content.
Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources

Props

Prop	Type	Default	Description
`name`	`string` \| `undefined`	—	The icon name, with or without its library prefix (e.g. `'star'` or `'fa-star'`). Mutually exclusive with `children`.
`children`	`Exclude<React.ReactNode, undefined>`	—	A custom node (an inline SVG, a `react-icons` component, …) rendered inside the icon container in place of a class-based glyph. Mutually exclusive with `name`.
`icon`	`string`	—	Deprecated. Use `name` instead. Legacy icon class string (e.g. `'fas fa-star'`). Only its last segment is read, as the glyph name; the library still comes from `library` or `ConfigProvider`, so `'mdi mdi-rocket'` renders an `fa` class unless the effective library is already `mdi` — set it here or on the provider.
`className`	`string`	—	Additional CSS classes to apply.
`textColor`	Bulma color \| `'inherit'` \| `'current'`	—	Text color helper.
`color`	`'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`	—	Bulma color modifier for the icon.
`bgColor`	Bulma color \| `'inherit'` \| `'current'`	—	Background color helper.
`library`	`'fa'` \| `'mdi'` \| `'ion'` \| `'material-icons'` \| `'material-symbols'`	`'fa'`	The icon library to use ('fa' = Font Awesome, 'mdi' = Material Design Icons, 'ion' = Ionicons Web Components, 'material-icons' = Google Material Icons, 'material-symbols' = Google Material Symbols). Defaults to the value set in ConfigProvider or 'fa' if not configured. Ignored when `children` supplies the glyph instead of `name`.
`variant`	`string`	—	Icon style variant (e.g. `'solid'`, `'outlined'`, `'rounded'`). Ignored when `children` supplies the glyph instead of `name`.
`features`	`string` \| `string[]`	—	Additional modifiers (e.g. `'fa-lg'`, `'fa-spin'`, `'is-size-1'`). Ignored when `children` supplies the glyph instead of `name`.
`libraryFeatures`	`string` \| `string[]`	—	Deprecated. Use `variant` and `features` instead. Additional modifiers in the older combined form, parsed into `variant` and `features`.
`size`	`'small'` \| `'medium'` \| `'large'`	—	Size modifier for the icon container.
`ariaLabel`	`string`	`'icon'`	ARIA label for accessibility. Applied unconditionally to the container span, so an icon that never sets it still renders `aria-label="icon"`. For an icon-only control, put the real `aria-label` on the control (e.g. `Button`) and set `aria-hidden` here instead — otherwise the control's accessible name is announced as just "icon". For a decorative icon beside visible text, set `aria-hidden` here rather than leaving the default, so it doesn't add "icon" to the text's accessible name.
`style`	`React.CSSProperties`	—	Inline style object.
`containerClassName`	`string`	—	Override the default `'icon'` container class (e.g., `'panel-icon'`).
`...`	All standard `<span>` attributes and Bulma helper props	—	See Helper Props

CSS & Sass Variables

Icon registers these variables on its own .icon element. Override them there (or via className) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See Theme.

CSS Variable	Sass Variable	Default
`--bulma-icon-dimensions`	`$icon-dimensions`	`1.5rem`
`--bulma-icon-dimensions-small`	`$icon-dimensions-small`	`1rem`
`--bulma-icon-dimensions-medium`	`$icon-dimensions-medium`	`2rem`
`--bulma-icon-dimensions-large`	`$icon-dimensions-large`	`3rem`
`--bulma-icon-text-spacing`	`$icon-text-spacing`	`0.25em`

Overview​

Import​

Usage​

Default Icon (Font Awesome)​

Font Awesome Large​

Spinning Icon​

Bordered​

With Text Color​

With Margin​

With Container Size​

Google Material Icons​

Material Symbols​

Material Design Icons​

Ionicons​

Custom node​

Accessibility​

Related Components​

Additional Resources​

Props​

CSS & Sass Variables​