Un solo set de íconos para toda tu interfaz: coherente, gratis y listo para pegar en tu código

Conoces la escena. Estás a punto de terminar una pantalla y necesitas un ícono de "configuración". Buscas en un pack, lo encuentras... pero es outline y el resto de tu diseño es relleno. Vas a otra librería, encuentras el relleno, pero ahora el grosor de línea no coincide. Descargas un tercero, y resulta que su licencia te obliga a dar créditos en el footer de tu cliente.

El resultado: una interfaz que se siente cosida con retazos. Pierdes media hora en algo que debería tomar diez segundos, y tu ojo (y el de tu cliente) nota que "algo no encaja", aunque no sepa explicar qué.

Phosphor Icons existe justamente para que ese caos desaparezca. Es una familia de íconos flexible, creada por Helena Zhang y Tobias Fried, con más de 1.500 íconos base pensados para interfaces, diagramas y presentaciones. La diferencia no está en la cantidad, sino en algo que casi ninguna librería gratuita ofrece: cada ícono viene en 6 pesos distintos. Un solo sistema, cero retazos.

Deja de elegir entre "se ve bien" y "es coherente": un ícono, seis pesos

Aquí está el superpoder de Phosphor. Cada uno de sus íconos existe en seis variantes visuales: Thin, Light, Regular, Bold, Fill y Duotone.

¿Por qué esto te cambia el flujo de trabajo? Porque el peso de un ícono deja de ser un accidente y se convierte en una herramienta de jerarquía:

• Regular para tu estado por defecto.

• Fill para lo que está activo o seleccionado.

• Bold para dar énfasis a una acción principal.

• Light para lo secundario que no debe robar atención.

• Duotone para ese detalle decorativo que hace que todo se vea intencional.

Nunca más vas a mezclar cinco librerías para conseguir un mismo símbolo en distintos estilos. Escoges "corazón" una vez, y lo tienes en las seis versiones, con el mismo trazo, la misma proporción y la misma personalidad. Tu interfaz respira coherencia sin que muevas un dedo extra.

Cópialo, pégalo y sigue creando: de Figma a tu código en segundos

Phosphor no te pide que interrumpas tu proceso para "adaptarlo". Se mete en tu flujo, tal como ya trabajas:

• ¿Diseñas en Figma? Hay plugin oficial con los seis pesos listos para arrastrar.

• ¿Programas en React, Vue, Svelte, Angular o Flutter? Existe un paquete dedicado para cada uno.

• ¿Solo quieres un SVG suelto? Lo copias del sitio y lo pegas donde lo necesites.

Y lo mejor: los íconos son componentes que se comportan como cualquier SVG. Cambias color, tamaño y peso con un par de propiedades, sin abrir un editor ni exportar nada. En React se ve tan simple como esto:

<Heart size={32} color="hotpink" weight="fill" />

<Heart size={32} color="hotpink" weight="fill" />

<Heart size={32} color="hotpink" weight="fill" />

Es tree-shakeable, así que tu proyecto solo carga los íconos que realmente usas —nada de inflar el bundle con miles de símbolos que jamás vas a tocar. Diseñas y desarrollas más rápido porque el ícono deja de ser un obstáculo y pasa a ser un detalle que resuelves sin pensar.

Úsalo en proyectos de clientes sin miedo a la letra pequeña

Esta es la parte que te quita un peso de encima. Phosphor es open source con licencia MIT.

En cristiano, eso significa que puedes:

• Usarlo gratis en proyectos personales, comerciales o de clientes.

• Sin pedir permiso y sin obligación de dar créditos.

• Modificar los íconos, incluirlos en software que vendes e incluso sublicenciarlos.

Cero suscripciones. Cero facturas sorpresa a mitad de proyecto. Cero cláusulas escondidas que te obliguen a rediseñar cuando el cliente crece. Entregas trabajo profesional con total tranquilidad legal, algo que muchos packs "gratuitos" no te garantizan.

El acabado "duotone" que hace que tu interfaz parezca de agencia premium

Si hay un detalle que separa a Phosphor del resto de librerías gratuitas, es su peso Duotone: íconos que combinan un trazo sólido con un relleno translúcido, dando esa sensación moderna, pulida y cara que normalmente asocias con productos de alto nivel.

Es el tipo de recurso que eleva la percepción de calidad de tu trabajo sin esfuerzo adicional. Un dashboard, una landing o una presentación pasan de "correcto" a "esto lo hizo alguien que sabe" simplemente cambiando una propiedad. Y como todos los pesos conviven en la misma familia, puedes usar Duotone donde quieras impresionar y volver a Regular donde necesites sobriedad, sin romper la armonía.

Tu próxima interfaz no tiene por qué verse remendada. Deja de pelear con cinco librerías, licencias confusas y estilos que no encajan. Un solo sistema, seis pesos, coherencia total y libertad para usarlo donde quieras.

👉 Entra a phosphoricons.com, busca cualquier ícono y míralo cambiar entre sus seis pesos en tiempo real. Vas a querer empezar a usarlo en tu proyecto actual antes de cerrar la pestaña.