Passing JSX elements instead of component references to Chakra UI’s <Icon> triggers forwardRef warnings and breaks styling. The fix lies in using proper component references with the as prop for reliable rendering.
Console Warning
Error Message in Console
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
What You Might Notice
- Broken or missing icons when using third-party icon libraries (e.g., react-icons, FontAwesome) with Chakra UI’s <Icon> component.
- Unexpected rendering behavior or loss of styling/accessibility props.
Root Cause
- Chakra UI’s <Icon> component expects an icon component reference (not a JSX element) so it can forward refs and apply style/accessibility props correctly.
- Passing a JSX element (e.g., <FaWindows />) breaks ref forwarding, triggering the error.
How This Error Commonly Appears
These common patterns often cause the error watch out for JSX elements in places where Chakra expects component references.
Using JSX Elements in Arrays
// ❌ Incorrect: Storing JSX elements directlyconst icons = [<FaWindows />, <FaPlaystation />];
Incorrect Use in Mapping or Props
// ❌ Will trigger warning<Icon as={<FaWindows />} />
Step‑by‑Step Guide
Follow these practical steps to fix the error and render icons reliably using Chakra UI’s Icon component.
Step 1: Store Component References, Not JSX Elements
// ❌ Incorrect: Storing JSX elementsconst icons = [<FaWindows />, <FaPlaystation />];
// ✅ Correct: Storing component references
const icons = [FaWindows, FaPlaystation];
Step 2: Use the as Prop with Chakra’s Icon
// Correct usage: Pass the component reference to the `as` prop<Icon as={FaWindows} boxSize={6} color="blue.500" />
Also Read: How to Build a Real-Time Chat App Using ReactJS?
Step 3: Mapping Over Icon Data
// Example: Rendering a row of icons<HStack>
{icons.map((IconComponent, idx) => (
<Icon as={IconComponent} boxSize={6} color="gray.600" key={idx} />
))}
</HStack>
Step 4: For FontAwesome or Custom SVGs
- FontAwesome: Use Chakra’s chakra() factory to wrap the icon if needed2.
import { chakra } from "@chakra-ui/react";import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const ChakraFa = chakra(FontAwesomeIcon);
<ChakraFa icon={faBars} boxSize={6} color="red.500" />
- Custom SVG: Use the asChild prop or wrap with Chakra’s Icon1.
Best Practices for Prevention
- Always pass icon component references to Chakra’s <Icon as={...} /> prop, not JSX elements.
- For third-party icons, consult the library’s integration guide—Chakra UI supports react-icons out of the box with the as prop.
- For custom SVGs, use Chakra’s Icon component or the asChild prop for correct styling and ref support.
- Wrap FontAwesome icons with chakra() if you want to use Chakra style props seamlessly.
