Skip to main content

Icon

Interfaces

IconProps

Props for the Icon component.

Extends

  • HTMLAttributes<HTMLSpanElement>.BulmaClassesProps

Properties

PropertyTypeDescriptionOverrides
alignContent?"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"Align content (e.g., 'center', 'stretch').-
alignItems?"flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline"Align items (e.g., 'center', 'flex-start').-
alignSelf?"auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"Align self (e.g., 'auto', 'center').-
ariaLabel?stringARIA label for accessibility (default: 'icon').-
backgroundColor?"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"Background color class (e.g., 'primary', 'info').-
bgColor?"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"Background color (Bulma color, 'inherit', or 'current').-
className?stringAdditional CSS classes to apply.React.HTMLAttributes.className
color?"primary" | "link" | "info" | "success" | "warning" | "danger"Bulma color modifier for the icon.React.HTMLAttributes.color
colorShade?"00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert"Color shade suffix (e.g., '00', 'invert').-
display?"block" | "flex" | "inline" | "inline-block" | "inline-flex"Display type (e.g., 'block', 'flex').-
flexDirection?"row" | "row-reverse" | "column" | "column-reverse"Flex direction (e.g., 'row', 'column').-
flexGrow?"0" | "1"Flex grow value (e.g., '0', '1').-
flexShrink?"0" | "1"Flex shrink value (e.g., '0', '1').-
flexWrap?"nowrap" | "wrap" | "wrap-reverse"Flex wrap (e.g., 'wrap', 'nowrap').-
float?"left" | "right"Float direction (e.g., 'left', 'right').-
fontFamily?"primary" | "sans-serif" | "monospace" | "secondary" | "code"Font family (e.g., 'sans-serif', 'code').-
interaction?"unselectable" | "clickable"Interaction behavior (e.g., 'unselectable', 'clickable').-
justifyContent?"left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end"Justify content (e.g., 'center', 'space-between').-
m?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin (e.g., '0', '1').-
mb?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin bottom.-
ml?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin left.-
mr?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin right.-
mt?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin top.-
mx?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin horizontal (left and right).-
my?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin vertical (top and bottom).-
namestringIcon class name(s), e.g., 'fas fa-star' for Font Awesome.-
overflow?"clipped"Overflow behavior (e.g., 'clipped').-
overlay?booleanApplies overlay styling if true.-
p?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding (e.g., '0', '1').-
pb?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding bottom.-
pl?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding left.-
pr?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding right.-
pt?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding top.-
px?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding horizontal (left and right).-
py?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding vertical (top and bottom).-
radius?"radiusless"Border radius style (e.g., 'radiusless').-
responsive?"mobile" | "narrow"Responsive behavior (e.g., 'mobile', 'narrow').-
shadow?"shadowless"Shadow style (e.g., 'shadowless').-
size?"medium" | "small" | "large"Size modifier for the icon.-
textAlign?"centered" | "justified" | "left" | "right"Text alignment (e.g., 'centered', 'left').-
textColor?"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"Text color (Bulma color, 'inherit', or 'current').-
textSize?"1" | "2" | "3" | "4" | "5" | "6" | "7"Text size (e.g., '1', '2').-
textTransform?"capitalized" | "lowercase" | "uppercase" | "italic"Text transformation (e.g., 'uppercase', 'italic').-
textWeight?"light" | "normal" | "medium" | "semibold" | "bold"Text weight (e.g., 'light', 'bold').-
viewport?"mobile" | "tablet" | "desktop" | "widescreen" | "fullhd"Viewport for responsive classes (e.g., 'mobile', 'desktop').-
visibility?"hidden" | "sr-only"Visibility (e.g., 'hidden', 'sr-only').-

Functions

Icon()

Icon(props, deprecatedLegacyContext?): ReactNode

Icon component for rendering a Bulma-styled icon container.

Supports Bulma helper classes for styling, color, and size, and renders an element for the icon itself.

Parameters

props

IconProps

Props for the Icon component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered icon element.