Skip to main content

​
Overview

The Icon component renders icons from the Grauity icon library with customizable properties like size, color, rotation, and styling options.

​
Basic Usage

import { Icon } from '@newtonschool/grauity';

function MyComponent() {
  return (
    <NSIcon 
      name="sparkle" 
      size="32" 
      color="var(--text-emphasis-primary-default)" 
    />
  );
}

​
Props

​
name
grauityIconName
required
Name of the icon to display from the Grauity icon library.
​
size
grauityIconSizeName
Size of the icon in pixels.Available sizes: 12, 16, 20, 24, 32, 40, etc.
​
color
string
Color of the icon. Accepts CSS color values or design tokens.
​
disabled
boolean
default:false
Show that the icon is in an inactive state.
​
loading
boolean
default:false
Use the icon as a loading spinner.
​
flipped
string
Flip the icon horizontally or vertically.Available choices: horizontally, vertically
​
rotated
string
Rotate the icon.Available choices: clockwise, counterclockwise
​
bordered
boolean
default:false
Format the icon to appear with a border.
​
circular
boolean
default:false
Format the icon to appear in a circular container.
​
inverted
boolean
default:false
Invert the icon colors (works with bordered or circular icons).
​
fitted
boolean
default:false
Remove space to the left or right of the icon.
​
link
boolean
default:false
Format the icon as a clickable link.
​
as
React.ElementType
Element type to render as (e.g., button, a, span).
​
className
string
Additional CSS classes to be added to the component.
​
style
React.CSSProperties
Additional inline styles to be applied to the element.
​
ariaHidden
string
Aria-hidden attribute for accessibility.
​
ariaLabel
string
Aria-label attribute for accessibility.

​
Icon Sizes

<NSIcon name="sparkle" size="12" />
<NSIcon name="sparkle" size="16" />
<NSIcon name="sparkle" size="20" />
<NSIcon name="sparkle" size="24" />
<NSIcon name="sparkle" size="32" />
<NSIcon name="sparkle" size="40" />

​
Loading State

Use an icon as a loading spinner: 
<NSIcon name="loading" loading={true} size="24" />

​
Disabled State

<NSIcon name="sparkle" disabled={true} size="24" />

​
Transformations

​
Flipped Icons

<NSIcon name="arrow-right" flipped="horizontally" />
<NSIcon name="arrow-right" flipped="vertically" />

​
Rotated Icons

<NSIcon name="arrow-right" rotated="clockwise" />
<NSIcon name="arrow-right" rotated="counterclockwise" />

​
Styled Icons

​
Bordered Icon

<NSIcon 
  name="sparkle" 
  bordered={true} 
  size="32" 
/>

​
Circular Icon

<NSIcon 
  name="sparkle" 
  circular={true} 
  size="32" 
/>

​
Inverted Colors

Works with bordered or circular icons: 
<NSIcon 
  name="sparkle" 
  bordered={true} 
  inverted={true} 
  size="32" 
/>

<NSIcon 
  name="sparkle" 
  circular={true} 
  inverted={true} 
  size="32" 
/>

​
Custom Colors

<NSIcon 
  name="sparkle" 
  color="#FF5733" 
  size="32" 
/>

<NSIcon 
  name="sparkle" 
  color="var(--text-emphasis-brand-default)" 
  size="32" 
/>

​
Inherit Color

Useful when used inside buttons or other colored containers: 
<NSIcon name="sparkle" color="inherit" size="20" />

Build docs developers (and LLMs) love

Get started for freeTalk to us