devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Iconos de cerrar gratis (SVG)

48 iconos de cerrar gratis de conjuntos de código abierto: haz clic en uno para cambiar su tamaño, color y trazo, y cópialo como SVG, JSX, URI de datos o CSS.

Actualizado el

shield-close
Lucidetab-close
Tablereye-closed
Iconoirpane-close-24-filled
Fluent UIclose
Material Symbolsclose
Material Design Iconsclose
Carbonpanel-top-close
Lucideweb-window-close
Iconoirpane-close-24-regular
Fluent UIclose-rounded
Material Symbolsclose-outline
Material Design Iconsclose-filled
Carbonpanel-left-close
Lucideshare-close-tray-20-filled
Fluent UItab-close
Material Symbolsclose-box
Material Design Iconsclose-outline
Carbonpanel-right-close
Lucideshare-close-tray-20-regular
Fluent UItab-close-outline
Material Symbolsclose-box-outline
Material Design Iconsclose-large
Carbonshare-close-tray-24-filled
Fluent UItab-close-outline-rounded
Material Symbolsmenu-close
Material Design Iconsside-panel-close
Carbonshare-close-tray-24-regular
Fluent UItab-close-outline-sharp
Material Symbolsclose-thick
Material Design Iconsside-panel-close-filled
Carbontab-close-rounded
Material Symbolsclose-circle
Material Design Iconsright-panel-close
Carbontab-close-sharp
Material Symbolsclose-circle-outline
Material Design Iconsright-panel-close-filled
Carbonclose-small
Material Symbolswindow-close
Material Design Iconsclose-small-outline
Material Symbolsclose-network
Material Design Iconsclose-small-outline-rounded
Material Symbolsclose-network-outline
Material Design Iconsclose-small-rounded
Material Symbolsclose-octagon
Material Design Iconstab-close-right
Material Symbolsclose-octagon-outline
Material Design Iconstab-close-right-outline
Material Symbols

Uso de iconos de cerrar

Una × cierra diálogos, descarta avisos y borra campos; dale al botón un estado de foco visible y un aria-label.

Todos los iconos de aquí siguen currentColor, así que toman el color de texto del elemento en el que están: un mismo SVG funciona en fondos claros y oscuros, en enlaces y en botones. Define un width y un height explícitos (o ajústalos en CSS con 1em) para que el diseño no salte mientras carga la página.

Iconos accesibles

Si el icono es decorativo o va junto a texto visible, añade aria-hidden="true". Si es el único contenido de un botón o enlace, dale a ese elemento un aria-label como “Cerrar”.

Licencias

Estos iconos de cerrar vienen de Lucide, Tabler, Iconoir, Fluent UI, Material Symbols, Material Design Icons y Carbon: conjuntos de código abierto bajo licencias MIT, ISC o Apache 2.0, que permiten el uso personal y comercial. ¿Necesitas algo más? Busca entre más de 70 000 iconos en el SVG Icon Finder.

Preguntas frecuentes

¿Son gratis estos iconos de cerrar para uso comercial?
Sí. Vienen de conjuntos de iconos de código abierto con licencias MIT, ISC o Apache 2.0, que permiten el uso comercial. Conserva el aviso de licencia si redistribuyes los propios archivos de iconos.
¿Cómo cambio el color de un icono de cerrar?
Los SVG usan currentColor, así que define el color CSS del elemento padre; o abre el icono en el buscador y elige un color fijo antes de copiarlo.
¿Puedo usar estos iconos en Webflow o React?
Sí. Abre un icono y usa Copy to Webflow (pega un Code Embed) o Copy JSX para un componente de React.