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

Iconos de advertencia SVG gratis

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

Actualizado el

mail-warning
Lucidewarning
Phosphorpc-warning
Iconoirwarning-12-filled
Fluent UIwarning
Material Symbolswarning
Material Design Iconswarning
Carbonwarning-bold
Phosphortv-warning
Iconoirwarning-12-regular
Fluent UIwarning-outline
Material Symbolswarning-outline
Material Design Iconswarning-filled
Carbonwarning-duotone
Phosphorcpu-warning
Iconoirwarning-16-filled
Fluent UIwarning-outline-rounded
Material Symbolswarning-box
Material Design Iconswarning-alt
Carbonwarning-fill
Phosphorwifi-warning
Iconoirwarning-16-regular
Fluent UIwarning-rounded
Material Symbolswarning-box-outline
Material Design Iconswarning-alt-filled
Carbonwarning-light
Phosphorwifi-warning-solid
Iconoirwarning-20-filled
Fluent UIwarning-off
Material Symbolsbus-warning
Material Design Iconswarning-hex
Carbonwarning-thin
Phosphorwarning-20-regular
Fluent UIwarning-off-outline
Material Symbolssim-warning
Material Design Iconswarning-hex-filled
Carbonseal-warning
Phosphorwarning-24-filled
Fluent UIwarning-off-outline-rounded
Material Symbolsbell-warning
Material Design Iconsseal-warning-bold
Phosphorwarning-24-regular
Fluent UIwarning-off-rounded
Material Symbolschat-warning
Material Design Iconsseal-warning-duotone
Phosphorwarning-28-filled
Fluent UIcast-warning
Material Symbolsdisc-warning
Material Design Icons

Cómo usar los iconos de advertencia

Los triángulos y los signos de exclamación indican advertencias y errores; combina el icono con texto para que el significado no dependa solo del color.

Todos los iconos de aquí siguen currentColor, así que heredan 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 se mueva mientras se 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 “Advertencia”.

Licencias

Estos iconos de advertencia proceden de Lucide, Phosphor, Iconoir, Fluent UI, Material Symbols, Material Design Icons y Carbon: sets de código abierto bajo licencias MIT, ISC o Apache 2.0, que permiten el uso personal y comercial. ¿Necesitas otra cosa? Busca entre más de 70,000+ iconos en el SVG Icon Finder.

Preguntas frecuentes

¿Son gratuitos estos iconos de advertencia para uso comercial?
Sí. Proceden de sets 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 advertencia?
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.