diff --git a/reflex_chakra/components/__init__.py b/reflex_chakra/components/__init__.py
index ed652c6..c0104bb 100644
--- a/reflex_chakra/components/__init__.py
+++ b/reflex_chakra/components/__init__.py
@@ -51,7 +51,6 @@
 code = Code.create
 collapse = Collapse.create
 color_mode_button = ColorModeButton.create
-color_mode_icon = ColorModeIcon.create
 color_mode_switch = ColorModeSwitch.create
 component = Component.create
 container = Container.create
diff --git a/reflex_chakra/components/forms/__init__.py b/reflex_chakra/components/forms/__init__.py
index 7bf225e..b3a4b1b 100644
--- a/reflex_chakra/components/forms/__init__.py
+++ b/reflex_chakra/components/forms/__init__.py
@@ -4,7 +4,7 @@
 from .checkbox import Checkbox, CheckboxGroup
 from .colormodeswitch import (
     ColorModeButton,
-    ColorModeIcon,
+    color_mode_icon,
     ColorModeScript,
     ColorModeSwitch,
 )
diff --git a/reflex_chakra/components/forms/colormodeswitch.py b/reflex_chakra/components/forms/colormodeswitch.py
index 8d9e59f..1751a8f 100644
--- a/reflex_chakra/components/forms/colormodeswitch.py
+++ b/reflex_chakra/components/forms/colormodeswitch.py
@@ -20,7 +20,7 @@
 from reflex_chakra.components import ChakraComponent
 from reflex_chakra.components.media.icon import Icon
 from reflex.components.component import BaseComponent
-from reflex.components.core.cond import Cond, color_mode_cond
+from reflex.components.core.cond import color_mode_cond
 from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode
 
 from .button import Button
@@ -30,28 +30,23 @@
 DEFAULT_DARK_ICON: Icon = Icon.create(tag="moon")
 
 
-class ColorModeIcon(Cond):
-    """Displays the current color mode as an icon."""
+def color_mode_icon(
+    light_component: BaseComponent | None = None,
+    dark_component: BaseComponent | None = None,
+):
+    """Create an icon component based on color_mode.
 
-    @classmethod
-    def create(
-        cls,
-        light_component: BaseComponent | None = None,
-        dark_component: BaseComponent | None = None,
-    ):
-        """Create an icon component based on color_mode.
-
-        Args:
-            light_component: the component to display when color mode is default
-            dark_component: the component to display when color mode is dark (non-default)
+    Args:
+        light_component: the component to display when color mode is default
+        dark_component: the component to display when color mode is dark (non-default)
 
-        Returns:
-            The conditionally rendered component
-        """
-        return color_mode_cond(
-            light=light_component or DEFAULT_LIGHT_ICON,
-            dark=dark_component or DEFAULT_DARK_ICON,
-        )
+    Returns:
+        The conditionally rendered component
+    """
+    return color_mode_cond(
+        light=light_component or DEFAULT_LIGHT_ICON,
+        dark=dark_component or DEFAULT_DARK_ICON,
+    )
 
 
 class ColorModeSwitch(Switch):
diff --git a/reflex_chakra/components/forms/colormodeswitch.pyi b/reflex_chakra/components/forms/colormodeswitch.pyi
index 0f944a1..9ff616c 100644
--- a/reflex_chakra/components/forms/colormodeswitch.pyi
+++ b/reflex_chakra/components/forms/colormodeswitch.pyi
@@ -8,7 +8,6 @@ from typing import Any, Callable, Dict, Literal, Optional, Union, overload
 from reflex_chakra.components import ChakraComponent
 from reflex_chakra.components.media.icon import Icon
 from reflex.components.component import BaseComponent
-from reflex.components.core.cond import Cond
 from reflex.event import EventHandler, EventSpec
 from reflex.style import Style
 from reflex.vars import Var
@@ -19,68 +18,20 @@ from .switch import Switch
 DEFAULT_LIGHT_ICON: Icon
 DEFAULT_DARK_ICON: Icon
 
-class ColorModeIcon(Cond):
-    @overload
-    @classmethod
-    def create(  # type: ignore
-        cls,
-        *children,
-        cond: Optional[Union[Var[Any], Any]] = None,
-        comp1: Optional[BaseComponent] = None,
-        comp2: Optional[BaseComponent] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_context_menu: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_double_click: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_mouse_down: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_enter: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        **props,
-    ) -> "ColorModeIcon":
-        """Create an icon component based on color_mode.
+def color_mode_icon(
+    light_component: Optional[Union[BaseComponent, None]] = None,
+    dark_component: Optional[Union[BaseComponent, None]] = None,
+):
+    """Create an icon component based on color_mode.
 
-        Args:
-            light_component: the component to display when color mode is default
-            dark_component: the component to display when color mode is dark (non-default)
+    Args:
+        light_component: the component to display when color mode is default
+        dark_component: the component to display when color mode is dark (non-default)
 
-        Returns:
-            The conditionally rendered component
-        """
-        ...
+    Returns:
+        The conditionally rendered component
+    """
+    ...
 
 class ColorModeSwitch(Switch):
     @overload