Get Started

    Components

      Overview

      The Icon component provides a consistent way to display Material Design icons in your React application. It leverages Google's Material Symbols font family to render scalable, high-quality icons that adapt perfectly to your design system.

      Installation Requirements

      Before using the Icon component, you need to install the material-symbols package to access the Material Symbols font:

      

      And then include the font in your root react application:
      

      

      Or if you prefer using a CDN, add this to your HTML head:
      

      

      Variants
      

      The Icon component supports three visual variants that correspond to different Material Symbols font styles:
      

        

      • Outlined: Clean, minimalist icons with outlined strokes (default)
        • 

      • Rounded: Softer icons with rounded corners and edges
        • 

      • Sharp: Bold, angular icons with sharp corners
        • 

      

      

      Sizes
      

      You can control the icon size using the size prop, which accepts either a number (pixels) or a CSS string value:
      

      

      Fill and Weight
      

      Icons can be customized with different fill states and font weights:
      

      Fill
      

      The fill prop controls whether the icon is filled (solid) or outlined:
      

      

      Weight
      

      The weight prop controls the thickness of the icon strokes (100-700):
      

      

      API Reference
      

      Icon
      

      A component for displaying Material Design icons using Google's Material Symbols.
      

      Props
      

      NameTypeDefaultDescription
      childrenstringRequiredThe Material Symbol icon name (e.g., "home", "star", "settings")
      variant"outlined" | "rounded" | "sharp""rounded"The visual style variant of the icon
      sizenumber | string"1em"The size of the icon. Numbers are treated as pixels, strings as CSS values
      fillbooleanfalseWhether the icon should be filled (solid) or outlined
      weightnumber400The font weight of the icon (100-700)
      

      Inherited Props
      

      The Icon component accepts all standard HTML span element props.
      

      Available Icon Names
      

      The component supports all Material Symbols icon names. You can browse the complete collection at:
      


      Notes
      

        

      • Ensure you have the Material Symbols font loaded in your project
        • 

      • Icon names should match the exact names from the Material Symbols collection
        • 

      • The component automatically handles accessibility with role="img" and aria-hidden="true"
        • 

      • Icons inherit the current text color by default
        • 

      • Size can be controlled via the size prop or CSS font-size
        • 

      • The component uses font variation settings for optimal rendering of fill and weight properties
        •