El icono
El primer SVG de tu código. Si hay varios, eliges cuál exportar.
CSS, diseño e iconosSVG, JSX y Tailwind a PNG
Código de icono a imagen
Pega código de icono de cualquier parte: SVG, JSX, Tailwind, variables CSS. Obtén PNG, favicons y tarjetas sociales.
Lo esencial
- Lee clases de Tailwind y variables CSS
- PNG de hasta 8192 px
- Paquete de favicon y tarjeta social
- El código se queda en tu dispositivo
Cómo convertir código de icono en una imagen
En un proyecto, un icono rara vez es un archivo que puedas descargar. Es un SVG dentro de un componente, coloreado con clases de Tailwind, currentColor y variables CSS que solo significan algo dentro de tu proyecto. Pega ese código aquí tal cual, y la herramienta averigua cómo debe verse: el fondo, la forma, el margen interior y cada color.
Funciona en tu navegador, así que tu código nunca se sube. El código pegado se trata como no fiable: los scripts, los manejadores de eventos y los enlaces a otros sitios se eliminan antes de dibujar nada.
Qué puedes pegar
- SVG puro de un archivo, una herramienta de diseño o una biblioteca de iconos.
- JSX o TSX, incluso un componente entero.
className,strokeWidthy los spreads de props se convierten. - Marcado con clases de Tailwind, incluido el elemento que rodea al icono y le da fondo y forma.
- Variables CSS como
var(--brand). Pega también tu tema y se rellenan solas.
Empieza por el paso 1, aquí abajo. Pega tu código o prueba un ejemplo. En el paso 2, define los colores que la herramienta no pudo averiguar. En el paso 3, ajusta la forma y el margen interior. En el paso 4, descarga un PNG, un SVG, un paquete de favicon o una tarjeta social (50 descargas al día, gratis).
Paso 1 de 4
Pega el código de tu icono
SVG, JSX o marcado con clases de Tailwind. La herramienta encuentra el icono, su fondo y sus colores.
Ejemplos
Este es un código de ejemplo. Pega el tuyo para reemplazarlo.
Tokens del tema (opcional)
Pega tus variables CSS o tu tema de Tailwind, y cada clase o var() que coincida se rellena sola. 3 colores leídos de tu tema.
Paso 2 de 4
Revisa los colores
Cada token de color de tu código y de dónde salió su valor. Define los que la herramienta no pudo averiguar.
Pega código de icono en el paso 1 para ver aquí sus colores.
Paso 3 de 4
Elige la forma
La forma del fondo y el espacio alrededor del icono. Ambos parten de lo que dice tu código.
Vista previa
Pega código de icono en el paso 1 para ver aquí la vista previa.
Paso 4 de 4
Exportar
Un PNG de cualquier tamaño, un SVG independiente, un paquete de favicon completo o una tarjeta social.
De 16 a 8192 px. Los tamaños de más de 4096 px necesitan mucha memoria y pueden fallar en teléfonos.
Gratis: te quedan 50 de 50 descargas hoy · copiar no tiene límite
Tu código se lee y se dibuja en este dispositivo y nunca se sube.
Guía de código de icono
Del código de icono a los archivos de imagen
Qué lee la herramienta en tu código, de dónde sale cada color y para qué sirven los archivos exportados.
Lo básico
Qué lee la herramienta
En un proyecto, un icono es más que su SVG. El elemento que lo rodea y las clases que lleva deciden cómo se ve. La herramienta lee cuatro cosas.
El contenedor
El elemento más cercano alrededor del icono que tiene fondo. Aporta el color de fondo, la forma y el tamaño de la caja.
currentColor
Los iconos suelen tomar su color del color de texto que los rodea. La herramienta busca la clase de color de texto o el estilo color más cercano.
Tokens de color
Colores con nombre, como bg-ink o var(--brand). Cada uno aparece en el paso 2 con el origen de su valor.
Por qué funciona en tu dispositivo
El código se lee y se dibuja en tu navegador. Nunca se sube, no hay cuenta, y los archivos se crean en tu propio dispositivo.
Ejemplo práctico
Un logo, leído paso a paso
Este es el primer ejemplo de la herramienta: un logo escrito como marcado con clases de Tailwind, más tres colores del tema del proyecto.
<span class="grid size-8 place-items-center rounded-full bg-ink text-card">
<svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor">
…
<circle cx="12" cy="7" r="1.1" class="fill-brand-500 stroke-none"></circle>
</svg>
</span>El resultado a 512 px. El margen interior sale de los dos tamaños: un icono de 20 px en una caja de 32 px deja 6 px a cada lado, que es el 18,8 % de la caja.
Lo que encuentra la herramienta
- size-8 en el span
- Una caja de 32 px
- rounded-full
- Círculo
- bg-ink
- Fondo: token ink
- size-5 en el svg
- Un icono de 20 px, o sea un 18,8 % de margen
- text-card + currentColor
- Color de línea: token card
- fill-brand-500
- Punto: token brand-500
- stroke-none
- El punto no lleva contorno
ink, card y brand-500 no son colores predeterminados de Tailwind, así que sin ayuda necesitarían un valor. El tema del ejemplo define los tres como variables CSS, y se resuelven solos.
Colores
De dónde sale cada color
Para cada token de color, la herramienta toma el primer valor que encuentra en este orden. El paso 2 muestra cuál usó.
| Orden | Origen | Qué es |
|---|---|---|
| 1 | Tú | Un color que elegiste o escribiste en el paso 2. Siempre tiene prioridad. |
| 2 | Tema | Variables CSS o un objeto de colores de Tailwind que pegaste en Tokens del tema. --color-ink e ink son el mismo token. |
| 3 | Valor de respaldo de var() | El segundo valor de var(--brand, #0f766e), cuando el código lo incluye. |
| 4 | Predeterminado de Tailwind | La paleta propia de Tailwind 4, para clases como bg-indigo-600 o text-white. |
| 5 | Necesita un valor | Nada lo define. La vista previa usa un valor provisional hasta que lo definas. |
En los archivos que descargas, los colores van escritos como códigos hexadecimales, con una opacidad aparte cuando hace falta, no como variables CSS ni clases. Así los archivos no dependen de la hoja de estilos de tu proyecto.
Paquete de favicon
Para qué sirve cada archivo
El paquete es un ZIP con diez archivos. Cópialos a la carpeta raíz de tu sitio y luego pega las líneas de head-snippet.html en el head de tu página.
| Archivo | Tamaño | Uso |
|---|---|---|
| favicon.ico | 16, 32, 48 px | Pestañas y marcadores del navegador, y todo lo que pida /favicon.ico. |
| favicon.svg | Cualquiera | Navegadores que aceptan un icono SVG. Se ve nítido a cualquier tamaño. |
| favicon-16x16.png, favicon-32x32.png | 16, 32 px | Versiones PNG del icono de la pestaña. |
| apple-touch-icon.png | 180 px | Pantallas de inicio de iPhone y iPad. Un cuadrado completo, sin transparencia. |
| icon-192.png, icon-512.png | 192, 512 px | Pantallas de inicio de Android y aplicaciones web instaladas. |
| icon-maskable-512.png | 512 px | Iconos adaptables de Android. Un cuadrado completo con espacio extra, para que el recorte en círculo no corte el icono. |
| site.webmanifest | Enumera los iconos para aplicaciones web instaladas. Añádele el nombre de tu sitio. | |
| head-snippet.html | Las etiquetas link y meta que debes pegar en el head de tu página. |
Conviene saber
Qué lee y qué no puede leer
La herramienta lee código, no lo ejecuta. Todo lo que solo existe cuando tu proyecto está en marcha hay que definirlo a mano.
SVG, JSX y TSX
SVG puro o un componente de React entero. Los atributos de JSX se convierten en atributos de SVG.
Clases de color de Tailwind
Fondo, texto, relleno y trazo, con modificadores de opacidad, valores arbitrarios y variables CSS.
Tamaños y esquinas
Las clases size, w, h y rounded, o width, height y border-radius en un atributo style.
Variantes oscuras
Las clases dark: se dejan fuera de forma predeterminada. Activa Usar la variante oscura para exportar la versión oscura.
Lo que no puede leer
Tus propias clases CSS
Una clase como .icon-primary está definida en una hoja de estilos que la herramienta nunca ve. Escribe el color en el código, o usa una variable CSS y defínela en el paso 2.
Valores definidos con JavaScript
fill={color} o una clase creada en ejecución no tienen valor en el propio código, así que el atributo se descarta. Define el color en el paso 2.
Fondos con degradado o imagen
Un contenedor con un degradado o una imagen de fondo se omite. La forma del fondo lleva un solo color sólido.
Dudas habituales
Código de icono a imagen: preguntas frecuentes
Respuestas rápidas sobre SVG y JSX, colores de Tailwind, favicons, transparencia, privacidad y límites.
¿Cómo convierto código SVG en un PNG?
Pega el código SVG en el paso 1, elige un tamaño en el paso 4 y pulsa Descargar PNG. Puedes exportar cualquier tamaño de 16 a 8192 píxeles. Las zonas que el icono no cubre quedan transparentes. Si el SVG usa variables CSS o currentColor, la herramienta muestra cada color en el paso 2 para que lo definas antes de exportar.
¿Cómo convierto un icono de React (JSX) en una imagen?
Pega el componente tal cual, con la función que lo rodea. La herramienta encuentra el marcado, convierte className en class y atributos como strokeWidth en stroke-width, e ignora los spreads de props y otras expresiones de JavaScript. Los valores que solo existen en ejecución, como fill={color}, no se pueden leer, así que define esos colores en el paso 2 o escríbelos en el código.
¿Por qué un color dice «necesita un valor»?
El código nombra un color que la herramienta no puede consultar, como un color propio de Tailwind (bg-ink) o una variable CSS (var(--brand)) definida en otra parte de tu proyecto. Pega tus variables CSS o tu tema de Tailwind en Tokens del tema y se rellenan solos, o elige el color a mano. Hasta entonces, la vista previa usa un valor provisional.
¿Qué clases de Tailwind entiende?
Las clases de color de fondo, texto, relleno y trazo (bg-, text-, fill-, stroke-), con modificadores de opacidad como bg-black/50, valores arbitrarios como bg-[#123456] y fill-[var(--x)], y la forma abreviada de Tailwind 4 bg-(--x). También lee grosores de trazo (stroke-2), tamaños (size-8, w-8, h-8) y esquinas redondeadas (rounded-full, rounded-2xl). Los colores predeterminados, como indigo-600, salen de la paleta de Tailwind 4. Las clases con una variante como hover: o md: se ignoran, y las clases dark: solo se usan si activas Usar la variante oscura.
¿Qué incluye el paquete de favicon?
Un ZIP con diez archivos: favicon.ico (16, 32 y 48 px), favicon.svg, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), icon-192.png, icon-512.png, icon-maskable-512.png, site.webmanifest y head-snippet.html. Pon los archivos en la carpeta raíz de tu sitio y pega las líneas de head-snippet.html en el head de tu página.
¿Por qué los iconos apple-touch y maskable se ven distintos de mi icono?
Los teléfonos recortan los iconos de la pantalla de inicio con su propia forma, e iOS rellena de negro las zonas transparentes. Por eso esos dos archivos son siempre un cuadrado completo con el color de fondo de tu icono (blanco si no tiene), con espacio extra alrededor del icono: al menos un 14 % en el icono apple-touch y un 24 % en el maskable. Los demás archivos conservan la forma que elegiste.
¿Puedo obtener un PNG con fondo transparente?
Sí. Todo lo que queda fuera de la forma del fondo es transparente, así que un círculo o un cuadrado redondeado tiene las esquinas transparentes. Elige Ninguna en el paso 3 para quitar la forma del fondo y exportar solo el icono.
¿Qué tamaño tiene la tarjeta social?
1200 × 630 píxeles, el tamaño de las vistas previas de enlaces (imágenes Open Graph) en la mayoría de redes sociales y aplicaciones de mensajería. Muestra tu icono sobre el color que elijas, con un título opcional al lado.
¿Se sube mi código?
No. El código se lee y se dibuja en tu navegador, en tu dispositivo. La página no lo envía a ningún sitio, y desaparece cuando cierras o recargas la pestaña.
¿Es seguro pegar código que copié de otro sitio?
El código pegado se trata como no fiable. Antes de dibujar nada, la herramienta elimina los elementos script, los manejadores de eventos como onload, las páginas incrustadas, los enlaces a otros sitios y las imágenes cargadas desde otros sitios. Los archivos que descargas contienen solo el dibujo.
¿Es gratis?
Sí, y sin registro. Tienes 50 descargas al día entre PNG, SVG, paquete de favicon y tarjeta social, y el contador se reinicia a medianoche. Copiar código SVG y Copiar PNG no cuentan.
Herramientas relacionadas
Más herramientas que funcionan en tu navegador
Pon tu logo en etiquetas de precio, convierte Markdown en HTML o dale a una foto un aire retro. Tampoco aquí se sube nada. El filtro de cámara digital está en español; Price Tag Maker y Markdown to HTML, por ahora solo en inglés.
- TAGPrice Tag MakerMake printable price tags for shelves, hang tags and stickers, one at a time or in bulk, with optional sale prices and barcodes.
- HTMLMarkdown to HTMLTurn Markdown into clean, semantic HTML, as a snippet for your CMS or a complete web page, converted on your device.
- CAMFiltro de cámara digitalDale a tus fotos el look de las cámaras digitales de los 2000: colores fríos de CCD, luces brillantes y grano, en tamaño completo y sin subirlas.