Use `forwardRef` with `IconBase`

Author: with-heartCreated Jul 8, 2020Updated Jun 29, 2026
Labelsenhancement

Is your feature request related to a problem? Please describe.

Chakra UI provides a Tooltip component that displays a tooltip when the component's children are hovered. In order to make this functionality work, we depend on the outermost child of Tooltip accepting a ref. Since IconBase does not forward refs, we are unable to make Tooltip work correctly if the outermost child is a react-icons icon.

See chakra-ui/chakra-ui#683 for a related issue on our end.

Describe the solution you'd like

Integrate React.forwardRef into IconBase so that icons generated by react-icons can accept a ref, increasing their flexibility and reusability.

See https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components for more details.

Describe alternatives you've considered

The only solution we have for our users is that they should wrap their react-icons icons with a component that forwards refs if they would like to wrap the icon with Tooltip.

Additional context

This would be a breaking change. https://reactjs.org/docs/forwarding-refs.html#note-for-component-library-maintainers