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

Iconos de configuración gratis (SVG)

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

settings
Lucidesettings
Tablersettings
Iconoirsettings-16-filled
Fluent UIsettings
Material Symbolssettings
Material Design Iconssettings
Carbonsettings-2
Lucidesettings-filled
Tablerios-settings
Iconoirsettings-16-regular
Fluent UIsettings-outline
Material Symbolssettings-outline
Material Design Iconssettings-edit
Carbonsettings-2
Tablersettings-20-filled
Fluent UIsettings-outline-rounded
Material Symbolscar-settings
Material Design Iconssettings-view
Carbonsettings-x
Tablersettings-20-regular
Fluent UIsettings-rounded
Material Symbolssettings-off
Material Design Iconssync-settings
Carbonsettings-ai
Tablersettings-24-filled
Fluent UIsettings-cell
Material Symbolssettings-off-outline
Material Design Iconstask-settings
Carbonsettings-up
Tablersettings-24-regular
Fluent UIrule-settings
Material Symbolseye-settings
Material Design Iconsuser-settings
Carbonsettings-cog
Tablersettings-28-filled
Fluent UIrule-settings-rounded
Material Symbolseye-settings-outline
Material Design Iconssettings-off
Tablersettings-28-regular
Fluent UIbell-settings
Material Design Iconssettings-pin
Tablersettings-32-filled
Fluent UIbell-settings-outline
Material Design Iconsfile-settings
Tablersettings-32-light
Fluent UIbook-settings
Material Design Iconsfile-settings-filled
Tabler

Cómo usar los iconos de configuración

El engranaje (cog) abre ajustes y preferencias; un icono de controles deslizantes es una alternativa habitual para filtros.

Todos los iconos aquí siguen currentColor, así que toman el color de texto del elemento donde se colocan: un mismo SVG funciona en fondos claros y oscuros, en enlaces y en botones. Define un width y un height explícitos (o dimensiónalos en CSS con 1em) para que el diseño no se desplace 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 “Ajustes”.

Licencias

Estos iconos de configuración proceden de Lucide, Tabler, 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 para uso comercial estos iconos de configuración?
Sí. Proceden 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 propios archivos de iconos.
¿Cómo cambio el color de un icono de configuració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.