Animar para explicar, no para decorar
Un icono animado puede confirmar una acción, señalar que un panel se ha abierto o hacer visible una transición que, de otro modo, sería demasiado rápida. Esa es la regla que uso al evaluar una interacción: si quito el movimiento, ¿se pierde información o solo un adorno? El post de LinkedIn que acompaña a este artículo y el repositorio público heroicons-animated sirven como punto de partida para explorar esa idea con iconos conocidos, pero no sustituyen una decisión de producto.
En React conviene que el icono reciba un estado semántico —por ejemplo, expanded, loading o success— y que la animación sea una consecuencia de ese estado. Así se evita disparar efectos por cada render y se conserva una interfaz que también funciona con una transición instantánea. La duración, el easing y el origen del movimiento deben reforzar la relación entre causa y efecto: un chevron rota al abrir un acordeón; un check aparece al completar una tarea.
Teclado y reducción de movimiento son parte del diseño
El icono no debe ser el control. Un botón accesible necesita nombre accesible, foco visible y una acción que se pueda ejecutar con teclado. El estado se comunica con atributos y texto cuando haga falta; la animación solo lo complementa. Si el movimiento depende de un hover, debe existir una alternativa para foco y para dispositivos táctiles. En un menú, por ejemplo, el botón sigue siendo el destino del foco mientras el icono acompaña la apertura.
La preferencia prefers-reduced-motion merece una variante explícita. No basta con esconder un spinner: las transiciones que ayudan a orientarse pueden reducirse a un cambio de color u opacidad, y las decorativas pueden desaparecer. También hay que comprobar contraste, tamaño táctil y lectura por lector de pantalla. Probar con teclado y con el ajuste del sistema activado revela problemas que una captura estática no muestra.
El coste está en el bundle y en la continuidad
Cada librería, variante SVG y dependencia de runtime suma mantenimiento. Antes de adoptar una colección animada conviene revisar su licencia, formato de distribución, tree-shaking y si permite importar un icono individual. Un icono inline puede evitar una petición adicional, pero también puede duplicar markup si se usa sin cuidado. Medir el build del proyecto y revisar el tamaño de las rutas es más fiable que prometer un ahorro genérico.
Mi criterio práctico es mantener una pequeña gramática: pocos movimientos, nombres de estado claros y una política común de reducción de movimiento. Así el equipo puede cambiar la implementación —CSS, SVG o una librería— sin cambiar el significado. El resultado no pretende impresionar; pretende que la interfaz cuente qué acaba de pasar y que siga siendo usable cuando la animación no está disponible.
¿Te interesa hablar de una decisión parecida en tu producto? Conoce mi servicio de desarrollo SaaS
Hablemos en LinkedIn , abre una nueva pestaña