styled-icons es una biblioteca moderna para React que transforma coleciones de iconos populares —como Material Design, Font Awesome y Octicons— en componentes reutilizables basados en styled-components. En lugar de cargar fuentes o SVGs estáticos, cada ícono se convierte en un componente React tipado, optimizado y personalizable.

Ventajas clave de la arquitectura modular

• Componentes autónomos: Cada ícono (por ejemplo, ArrowUp, GitHub) se importa de forma granular, evitando carga innecesaria.
• Compatibilidad con temas: Hereda automáticamante las variables del tema de styled-components, permitiendo estilos coherentes sin duplicación.
• Soporte nativo para TypeScript: Interfaces como StyledIconBaseProps garantizan autocompletado y validación en tiempo de compilación.
• Renderizado eficiente: No depende de CSS externo ni de fuentes web; los íconos son SVG inline con atributos dinámicos.
• Escalabilidad por paquetes: Los iconos se organizan por familia (@styled-icons/material, @styled-icons/fa-solid, etc.), facilitando actualizaciones independientes.

Instalación y uso básico

Instala solo los paquetes necesarios:

npm install @styled-icons/styled-icon @styled-icons/material @styled-icons/fa-solid
# o con pnpm
pnpm add @styled-icons/styled-icon @styled-icons/material

Usa un ícono directamente como componente JSX:

import { Dashboard } from '@styled-icons/material/Dashboard'
import { UserCircle } from '@styled-icons/fa-solid/UserCircle'

function Header() {
  return (
    <header>
      <Dashboard size="1.5rem" color="#2c3e50" />
      <UserCircle size="1.25rem" color="#7f8c8d" />
      <h1>Panel de control</h1>
    </header>
  )
}

Personalización avanazda

Crea variantes reutilizables mediante styled():

import styled from 'styled-components'
import { Bell } from '@styled-icons/feather/Bell'

const AlertBell = styled(Bell)`
  fill: ${props => props.alert ? '#e74c3c' : props.theme.colors.icon};
  transition: transform 0.2s;
  
  &:hover {
    transform: scale(1.1);
  }
`

// Uso:
// <AlertBell size="20" alert={hasUnread} />

Patrones prácticos

Dimensiones responsivas

Ajusta el tamaño según contexto usando valores escalables:

<Settings size={isCompact ? '16px' : '20px'} />

Íconos condicionales

Intercambia visualmente según estado:

import { Play, Pause } from '@styled-icons/feather'

function PlaybackButton({ isPlaying, onToggle }) {
  return (
    <button onClick={onToggle}>
      {isPlaying ? (
        <Pause size="24" aria-label="Pausar" />
      ) : (
        <Play size="24" aria-label="Reproducir" />
      )}
    </button>
  )
}

Integración con sistemas de diseño

Define estilos de íconos en tu tema global:

const theme = {
  icons: {
    defaultSize: '1.125rem',
    primaryColor: '#3498db',
    disabledColor: '#bdc3c7',
  }
}

// Luego en un componente:
const PrimaryIcon = styled(Home)`
  color: ${props => props.theme.icons.primaryColor};
  width: ${props => props.theme.icons.defaultSize};
`

Familias disponibles

• Material Icons: Diseño limpio y adaptable, ideal para aplicaciones empresariales.
• Font Awesome (Solid/Brands/Regular): Amplia cobertura de logotipos y símbolos funcionales.
• Octicons: Íconos minimalistas inspirados en GitHub, útiles para herramientas de desarrollo.
• Feather Icons: Líneas finas y equilibradas, perfectos para interfaces ligeras.

Optimización de bundle

Gracias a la estructura de módulos ES, Webpack y Vite eliminan automáticamente los íconos no utilizados. Por ejemplo, importar solo Close de @styled-icons/material no incluye los otros 2 000+ íconos del paquete.