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

Iconos de información gratis (SVG)

48 iconos de información 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

info
Lucidefile-info
Tablerinfo
Phosphorinfo
Bootstrap Iconsinfo-circle
Iconoirinfo-12-filled
Fluent UIinfo
Material Symbolscar-info
Material Design Iconsbadge-info
Lucidefile-info-filled
Tablerinfo-bold
Phosphorinfo-lg
Bootstrap Iconsinfo-circle-solid
Iconoirinfo-12-regular
Fluent UIinfo-outline
Material Symbolsinformation
Material Design Iconsinfo-small
Tablerinfo-duotone
Phosphorinfo-circle
Bootstrap Iconsinfo-16-filled
Fluent UIinfo-outline-rounded
Material Symbolsinformation-outline
Material Design Iconsinfo-circle
Tablerinfo-fill
Phosphorinfo-circle-fill
Bootstrap Iconsinfo-16-regular
Fluent UIinfo-rounded
Material Symbolsinfo-circle-filled
Tablerinfo-light
Phosphorinfo-square
Bootstrap Iconsinfo-20-filled
Fluent UIinfo-i
Material Symbolsinfo-square
Tablerinfo-thin
Phosphorinfo-square-fill
Bootstrap Iconsinfo-20-regular
Fluent UIinfo-i-rounded
Material Symbolsinfo-square-filled
Tablerinfo-24-filled
Fluent UIchat-info
Material Symbolsinfo-hexagon
Tablerinfo-24-regular
Fluent UIchat-info-outline
Material Symbolsinfo-hexagon-filled
Tablerinfo-28-filled
Fluent UIchat-info-outline-rounded
Material Symbolsinfo-octagon
Tablerinfo-28-regular
Fluent UI

Uso de iconos de información

Una “i” dentro de un círculo abre la ayuda, los tooltips y la información adicional.

Todos los iconos de esta página siguen currentColor, así que toman el color de texto del elemento en el que están: un solo 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 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 “Info”.

Licencias

Estos iconos de información provienen de Lucide, Tabler, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols y Material Design Icons: sets 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 gratuitos estos iconos de información para uso comercial?
Sí. Provienen de sets de iconos de código abierto bajo licencias MIT, ISC o Apache 2.0, que permiten el uso comercial. Conserva el aviso de licencia si redistribuyes los archivos de los iconos.
¿Cómo cambio el color de un icono de información?
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.