# Dibujar iconos sencillos con CSS sin usar SVG ni imágenes > Dibujar iconos sencillos con CSS sin usar SVG ni imágenes. Descubre técnicas, ejemplos prácticos y claves UX para crear iconos claros, ligeros y reutilizables. - URL canónica: https://www.martagonzalez.dev/blog/dibujar-iconos-sencillos-con-css-sin-usar-svg-ni-imagenes/ - Fecha de publicación: 2026-04-09T14:44:09 - Última actualización: 2026-06-12T07:35:18 --- ![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2026/04/dibujar-iconos-sencillos-con-css-1024x683.avif) Cuando pensamos en iconografía para una interfaz, lo más habitual es recurrir a SVG , librerías de iconos o imágenes exportadas desde una herramienta de diseño. Es una decisión lógica, práctica y muy extendida. Sin embargo, hay un terreno donde dibujar iconos con CSS sigue teniendo muchísimo sentido: pequeños componentes, microinteracciones, detalles visuales del sistema y elementos geométricos sencillos que no necesitan depender de recursos externos. Este enfoque no consiste en reemplazar por completo otras soluciones. La clave está en entender cuándo compensa y por qué puede ser útil . En muchos casos, crear iconos con CSS permite reducir dependencias, integrar mejor el estilo visual con el componente y controlar estados interactivos de forma muy natural. Además, trabajar así obliga a pensar la interfaz de otra manera. No se trata solo de “dibujar”, sino de construir formas con intención . Y ahí aparece una idea muy interesante desde UX: la relación entre tiempo de decisión y carga cognitiva . Un icono cumple bien su función cuando se entiende casi sin pensar. Si una persona necesita detenerse demasiado para interpretarlo, el tiempo de decisión aumenta. Y cuando eso ocurre, también sube la carga cognitiva. En cambio, si el icono es claro, reconocible y coherente con el sistema visual, la interfaz se vuelve más fluida. En este artículo vas a ver cómo dibujar iconos sencillos con CSS sin usar SVG ni imágenes , qué propiedades conviene utilizar, qué errores evitar y cómo aplicar este enfoque en componentes reales. La idea no es solo que copies ejemplos, sino que entiendas la lógica visual que hay detrás para poder construir tus propios iconos con criterio. ## Cuándo tiene sentido dibujar iconos con CSS La primera pregunta razonable es esta: si ya existen SVG, librerías y sprites, ¿por qué seguir explorando el dibujo con hojas de estilo ? La respuesta no es que CSS sea mejor en todos los casos. La respuesta correcta es que, en algunos contextos, es una solución suficientemente buena y además muy eficiente . ### CSS como herramienta para formas simples Los iconos hechos con CSS funcionan especialmente bien cuando están formados por: - líneas - círculos - rectángulos - esquinas - diagonales - composiciones muy básicas Por eso suelen encajar bien iconos como una X de cerrar , un signo más , un signo menos , una flecha , una lupa o un check . Todos ellos comparten una característica: pueden descomponerse visualmente en formas muy simples. ### Qué ventajas puede aportar este enfoque Cuando el contexto acompaña, crear iconos con CSS tiene varias ventajas. La primera es que evitas cargar archivos o dependencias externas para resolver algo muy pequeño. La segunda es que el icono pasa a formar parte del propio sistema de estilos del componente. La tercera es que las transiciones, animaciones y cambios de estado se vuelven muy cómodos de manejar. También hay una ventaja menos obvia: este enfoque te ayuda a pensar mejor la estructura visual de una interfaz. Te obliga a preguntarte qué forma es realmente necesaria para comunicar una acción. ### Cuándo no compensa Aquí conviene ser claras: no todos los iconos deberían hacerse con CSS . En cuanto el icono necesita detalle, curvas complejas, múltiples capas, precisión de marca o escalabilidad muy fina, SVG suele ser mejor opción. Dicho de otra manera: CSS es excelente para iconos sencillos, pero no para todo un sistema complejo de iconografía . ## Cómo pensar un icono como una construcción geométrica Para dibujar con CSS hay que cambiar un poco la mentalidad. No estás pintando libremente, sino construyendo a partir de cajas y reglas visuales. ### Todo parte de un contenedor La base habitual de un icono CSS es un elemento contenedor pequeño que servirá como área de dibujo: Y una base común como esta: .icon { position: relative; display: inline-block; width: 24px; height: 24px; color: currentColor; } Este patrón es simple, pero muy útil. El icono tiene un espacio definido, puede heredar color del contexto y permite posicionar pseudo-elementos dentro de él. ### El papel de ::before y ::after Los pseudo-elementos son casi imprescindibles para este tipo de trabajo. Gracias a ::before y ::after puedes añadir trazos y formas sin meter más HTML. .icon::before, .icon::after { content: ""; position: absolute; box-sizing: border-box; } Con este enfoque tienes tres capas principales para dibujar: - el propio elemento - ::before - ::after Y si además usas box-shadow , puedes duplicar líneas o repetir formas con muy poco código. ### Propiedades CSS que más vas a usar Si quieres trabajar iconos con CSS , estas propiedades te van a acompañar una y otra vez: - background - border - border-radius - transform - rotate - box-shadow - gradientes lineales y radiales - posicionamiento absoluto No hace falta recurrir siempre a técnicas avanzadas. De hecho, muchas veces cuanto más simple es la construcción, mejor se entiende y más fácil es de mantener. ## Tiempo de decisión y carga cognitiva en iconografía de interfaz Aquí entramos en un punto clave para que este artículo no se quede solo en la parte técnica. Un icono no se valora únicamente por cómo está construido, sino por la rapidez con la que comunica . Cuando una persona ve un icono y entiende al instante qué acción representa, el tiempo de decisión baja. Eso significa que la interacción se siente más natural. En cambio, cuando el icono es ambiguo, recargado o inconsistente con otros iconos del sistema, ocurre lo contrario. El usuario duda más. Tiene que interpretar. Tiene que frenar un segundo. Y ese pequeño freno incrementa la carga cognitiva. ### Un icono muy ingenioso no siempre es un buen icono Este es uno de los errores más comunes cuando se explora el dibujo con CSS : obsesionarse con lo espectacular y olvidar lo legible. Sí, puede ser divertido construir una forma rebuscada solo con bordes, sombras y rotaciones. Pero si el resultado no se entiende rápido o requiere demasiados ajustes visuales para funcionar, quizá no sea la mejor solución. La pregunta útil no es solo “¿puedo dibujarlo con CSS?”, sino esta otra: “¿lo entenderá la persona usuaria sin esfuerzo?” ## Preparar una base reutilizable para iconos con CSS Si vas a usar esta técnica en más de un componente, merece la pena preparar una pequeña base reutilizable. ### Variables CSS para mantener coherencia :root { --icon-size: 24px; --icon-stroke: 2px; } Y después: .icon { position: relative; display: inline-block; width: var(--icon-size); height: var(--icon-size); color: currentColor; flex-shrink: 0; }.icon::before, .icon::after { content: ""; position: absolute; box-sizing: border-box; } Esto te permite mantener coherencia entre varios iconos y cambiar el tamaño general sin tener que reescribir toda la colección. ### Integración natural con botones y enlaces Una de las ventajas más claras de los iconos con CSS es que pueden integrarse muy bien dentro de un botón o enlace sin depender de un recurso externo. .button-with-icon { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: #222; } Como el icono usa currentColor , adoptará automáticamente el color del texto del componente. Eso reduce trabajo visual y mejora consistencia. ## Ejemplos prácticos de iconos sencillos con CSS Vamos a la parte más útil: ejemplos concretos. ## Cómo dibujar una X de cerrar con CSS Este es uno de los iconos más agradecidos para empezar. .icon-close::before, .icon-close::after { top: 50%; left: 50%; width: 18px; height: var(--icon-stroke); background: currentColor; transform-origin: center; }.icon-close::before { transform: translate(-50%, -50%) rotate(45deg); }.icon-close::after { transform: translate(-50%, -50%) rotate(-45deg); } Aquí estás usando dos barras y cruzándolas. La idea es simple y funciona muy bien en botones de cerrar, modales, etiquetas y alertas. ### Qué conviene vigilar Si haces la X demasiado fina o pequeña, perderá claridad. Y si el grosor no acompaña, el usuario puede tardar un poco más en procesarla. Aunque parezca un detalle menor, este tipo de ajustes afecta directamente al tiempo de decisión. ## Cómo dibujar un icono de más y menos con CSS Muy útiles para acordeones, controles de cantidad o interfaces expandibles. ### Icono de más .icon-plus::before, .icon-plus::after { top: 50%; left: 50%; background: currentColor; transform: translate(-50%, -50%); }.icon-plus::before { width: 18px; height: var(--icon-stroke); }.icon-plus::after { width: var(--icon-stroke); height: 18px; } ### Icono de menos .icon-minus::before { top: 50%; left: 50%; width: 18px; height: var(--icon-stroke); background: currentColor; transform: translate(-50%, -50%); } ### Cómo mejorar la interacción Si el + pasa a - en un acordeón, una transición suave ayuda a que el cambio se perciba con más naturalidad. Una interfaz clara no solo depende de las formas, sino también de cómo cambian esas formas. ## Cómo dibujar una hamburguesa de menú con CSS El clásico menú hamburguesa puede resolverse con muy poco código. .icon-menu::before, .icon-menu::after, .icon-menu { background: currentColor; }.icon-menu { width: 18px; height: var(--icon-stroke); margin-top: 11px; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } Aquí el elemento principal funciona como línea central y box-shadow genera las dos líneas extra. ### Por qué es una buena solución Es compacta, ligera y fácil de animar. Eso sí, sigue siendo importante recordar que esconder la navegación tras un menú no siempre mejora la experiencia. En escritorio, muchas veces mostrar las opciones directamente reduce carga cognitiva. ## Cómo dibujar una lupa con CSS La lupa es uno de los mejores ejemplos de iconos sencillos con CSS . .icon-search::before { top: 3px; left: 3px; width: 12px; height: 12px; border: var(--icon-stroke) solid currentColor; border-radius: 50%; }.icon-search::after { width: 9px; height: var(--icon-stroke); background: currentColor; right: 2px; bottom: 4px; transform: rotate(45deg); transform-origin: right center; } Aquí combinas un círculo y una barra inclinada. La forma es muy estable visualmente y además escala bien en distintos tamaños. ## Cómo dibujar un check con CSS .icon-check::before { left: 7px; top: 3px; width: 7px; height: 14px; border-right: var(--icon-stroke) solid currentColor; border-bottom: var(--icon-stroke) solid currentColor; transform: rotate(45deg); } Este patrón funciona muy bien en validaciones, listas de ventajas o estados completados. ### Qué hace que un check funcione bien Debe verse claro, limpio y equilibrado. Si queda demasiado estrecho, muy corto o con mala inclinación, deja de leerse con rapidez. ## Cómo dibujar flechas con CSS Las flechas son ideales para enlaces, CTAs y navegación. ### Flecha derecha .icon-arrow-right::before { top: 50%; left: 4px; width: 14px; height: 14px; border-top: var(--icon-stroke) solid currentColor; border-right: var(--icon-stroke) solid currentColor; transform: translateY(-50%) rotate(45deg); } ### Flecha con cuerpo .icon-arrow-line::before { top: 50%; left: 3px; width: 14px; height: var(--icon-stroke); background: currentColor; transform: translateY(-50%); }.icon-arrow-line::after { top: 50%; right: 3px; width: 8px; height: 8px; border-top: var(--icon-stroke) solid currentColor; border-right: var(--icon-stroke) solid currentColor; transform: translateY(-50%) rotate(45deg); } Una flecha bien construida comunica dirección y avance casi instantáneamente. Esa inmediatez es justo lo que reduce tiempo de decisión. ## Ejemplos un poco más avanzados de dibujo con hojas de estilo Cuando ya controlas trazos, círculos y diagonales, puedes experimentar con formas algo más complejas. ## Corazón sencillo con CSS .icon-heart { transform: rotate(-45deg); }.icon-heart::before, .icon-heart::after { width: 12px; height: 18px; background: currentColor; border-radius: 12px 12px 0 0; }.icon-heart::before { left: 6px; top: 6px; }.icon-heart::after { left: 0; top: 12px; transform: rotate(90deg); transform-origin: top left; } Este ejemplo ya requiere más cuidado visual. Funciona, pero también deja bastante claro que llega un punto en el que CSS empieza a ser menos natural que SVG. ## Casa básica con CSS .icon-home::before { left: 5px; bottom: 4px; width: 14px; height: 10px; border: var(--icon-stroke) solid currentColor; border-top: none; }.icon-home::after { left: 6px; top: 3px; width: 12px; height: 12px; border-top: var(--icon-stroke) solid currentColor; border-left: var(--icon-stroke) solid currentColor; transform: rotate(45deg); } Es un icono muy simple, pero comunica bien la idea de “inicio” o “home” cuando el contexto acompaña. ## Animación e interacción: donde CSS aporta mucho valor Aquí es donde este enfoque gana fuerza. Un icono hecho con CSS no es solo un dibujo: puede convertirse en una parte viva del componente. ### Un pequeño desplazamiento en hover .button-with-icon .icon-arrow-line { transition: transform 0.2s ease; }.button-with-icon:hover .icon-arrow-line { transform: translateX(3px); } Ese gesto pequeño ayuda a reforzar la idea de avance o navegación. ### Transformar menú en cerrar También puedes convertir una hamburguesa en una X cuando el menú se abre. Este tipo de transformación visual suele resultar muy natural si está bien medida. ### La microanimación también influye en la claridad Una animación adecuada puede acompañar la comprensión del cambio de estado . Una animación excesiva, lenta o innecesaria puede distraer y añadir carga cognitiva. Como casi todo en interfaz, el equilibrio importa más que el efecto. ## Errores frecuentes al crear iconos con CSS Aunque el dibujo “salga”, eso no significa que la solución sea buena. ### Forzar CSS cuando el icono ya pide SVG Este es el error más común. Si la forma necesita demasiados trucos, quizá ya no sea una buena candidata para CSS. ### Usar demasiados valores mágicos Muchos top , left , right y width sin sistema detrás pueden volver el código difícil de mantener. ### Dibujar demasiado pequeño Un icono minúsculo pierde definición y obliga a hacer más esfuerzo visual. ### No cuidar la accesibilidad Si el icono es decorativo, debe ir con aria-hidden="true" . Si representa una acción sin texto visible, el botón o enlace debe tener un nombre accesible. ### Ser original a costa de la claridad En iconografía de interfaz, la creatividad tiene que convivir con el reconocimiento inmediato. Si el usuario duda, el sistema pierde claridad. ## Buenas prácticas para crear iconos CSS mantenibles Conviene cerrar la parte técnica con recomendaciones aplicables en proyectos reales. ### Usa variables y patrones comunes Te ayudarán a mantener coherencia entre tamaños, grosores y espaciados. ### Piensa primero en la forma mínima necesaria Antes de escribir código, pregúntate si el icono puede resolverse con dos o tres piezas simples. ### Mantén un estilo consistente No mezcles iconos muy gruesos con otros extremadamente finos si forman parte del mismo sistema. ### Prueba siempre a tamaño real Un icono puede parecer correcto ampliado, pero no funcionar dentro de un botón de 40 píxeles. ### Diseña para lectura rápida La prioridad no es demostrar una técnica ingeniosa, sino hacer que la persona usuaria entienda la acción sin fricción. ## Cuándo usar iconos con CSS en un proyecto real La respuesta más honesta es: úsalos cuando simplifican, no cuando complican . Funcionan muy bien en: - botones de cerrar - controles de acordeón - microinteracciones - estados simples - flechas básicas - prototipos - componentes ligeros No suelen ser la mejor opción para: - sistemas completos de iconografía - iconos de marca - formas muy orgánicas - ilustraciones complejas - bibliotecas escalables de gran tamaño Lo importante no es la pureza técnica, sino elegir lo que mejor resuelve el problema con el menor coste de mantenimiento. ## Preguntas frecuentes sobre dibujar iconos con CSS ### ¿Es recomendable crear todos los iconos de una web solo con CSS? No suele ser lo más práctico. CSS funciona muy bien para iconos básicos y geométricos, pero cuando el sistema crece o los iconos se vuelven más complejos, SVG suele ofrecer más control y mejor mantenimiento. ### ¿Los iconos con CSS son buenos para animaciones? Sí, especialmente para microinteracciones sencillas. Cambios de estado, desplazamientos, rotaciones o transformaciones pequeñas suelen resolverse muy bien con CSS. ### ¿Dibujar con CSS mejora siempre el rendimiento? No siempre. Puede evitar recursos externos en casos simples, pero si el icono requiere demasiadas capas, sombras o ajustes complejos, el beneficio deja de ser tan claro. ## Iconografía en CSS: cuando la simplicidad mejora la experiencia Explorar cómo dibujar iconos sencillos con CSS sin usar SVG ni imágenes no es solo un ejercicio técnico. También es una forma muy útil de entrenar criterio visual. Cuando reduces una forma a líneas, bordes, radios y transformaciones, te obligas a pensar qué parte del dibujo es realmente necesaria para comunicar. Y ese ejercicio conecta directamente con algo esencial en UX: hacer que las decisiones sean fáciles de tomar . Un icono claro reduce dudas. Un icono ambiguo las aumenta. Un sistema coherente baja la carga cognitiva. Un sistema inconsistente la eleva. Por eso, aunque hablemos de detalles pequeños, estamos hablando de experiencia de usuario en sentido amplio. En el fondo, dibujar con hojas de estilo no consiste solo en ahorrar un SVG. Consiste en entender cómo una interfaz comunica con la menor fricción posible. Y cuando ese objetivo se cumple, incluso un simple icono puede mejorar mucho más de lo que parece.