Búsqueda de Iconos Busca y personaliza iconos SVG de código abierto con tamaño, color y trazo ajustables.
Búsqueda de Iconos
Busca y personaliza iconos SVG de código abierto con tamaño, color y trazo ajustables.
Buscar íconos
Escribe una palabra clave para filtrar íconos por nombre en múltiples categorías.
Personalizar la apariencia
Ajusta el color, tamaño y ancho del trazo del ícono para que coincida con tu diseño.
Copiar el SVG
Haz clic en un ícono para copiar su código SVG personalizado.
What Is Búsqueda de Iconos?
La herramienta de búsqueda de iconos te permite navegar, personalizar y copiar iconos SVG de código abierto. Los iconos son elementos esenciales de la interfaz de usuario para la navegación, las acciones, los indicadores de estado y la comunicación visual. Esta herramienta incluye iconos en seis categorías: Flechas, Acciones, IU, Medios, Comunicación y Archivos. Cada icono es un SVG basado en trazos que se puede personalizar con el color, tamaño y ancho de trazo preferidos. Busca por palabra clave para encontrar rápidamente el icono que necesitas. Haz clic en cualquier icono para copiar su código SVG con los ajustes personalizados aplicados. El SVG generado es limpio, accesible y listo para usar inline en HTML o como archivos SVG independientes.
Why Use Búsqueda de Iconos?
-
Categorías de íconos organizadas: Flechas, Acciones, IU, Medios y más
-
Búsqueda por palabra clave para un descubrimiento rápido de íconos
-
Color, tamaño y ancho del trazo personalizables
-
Copia con un solo clic de código SVG limpio y accesible
Common Use Cases
Desarrollo de IU
Encuentra y personaliza íconos para botones, navegación y elementos de la interfaz.
Creación de prototipos rápidos
Obtén íconos rápidamente para maquetas y prototipos sin buscar en la web.
Consistencia del diseño
Utiliza íconos basados en trazos coincidentes para un diseño de interfaz coherente.
Documentación
Agrega íconos visuales a la documentación, guías y archivos README.
Technical Guide
Los iconos SVG utilizan el elemento <svg> con viewBox para escalado independiente del tamaño de pantalla. Los iconos basados en trazos utilizan el atributo stroke para el color, stroke-width para el grosor de la línea y stroke-linecap/stroke-linejoin para los extremos de la línea. El atributo fill="none" asegura que solo se muestren los trazos. Los iconos SVG se pueden usar inline en HTML para estilos CSS directos, como src de <img> para un uso sencillo o como imagen de fondo de CSS a través de URI de datos. Para la accesibilidad, agrega los atributos role="img" y aria-label a los iconos decorativos, o aria-hidden="true" para iconos puramente decorativos con etiquetas de texto visibles. Los iconos SVG se escalan perfectamente a cualquier tamaño sin pérdida de calidad. Para sistemas de iconos, considera usar hojas de sprites SVG o un componente de icono que haga referencia a definiciones SVG. La palabra clave currentColor permite que los iconos hereden el color del texto del elemento principal.
Tips & Best Practices
-
1Utiliza íconos basados en trazos para un estilo coherente en todo tu proyecto
-
2Establece el color del trazo en currentColor para heredar automáticamente el color del texto
-
3Mantén los tamaños de los íconos consistentes; 24px es un tamaño estándar común
-
4Agrega aria-label para botones de íconos accesibles sin texto visible
Related Tools
Generador de botones CSS
Diseña botones personalizados de CSS con colores, relleno, bordes, sombras y efectos de desplazamiento.
🎨 CSS & Design
SVG a fondo de CSS
Codifica el código SVG como una imagen de fondo de CSS utilizando la codificación URI de datos.
🎨 CSS & Design
Generador de Variables CSS
Genera propiedades personalizadas de CSS (variables) para colores, espaciado y tipografía.
🎨 CSS & Design
Generador de patrones SVG
Genera patrones repetitivos basados en SVG para fondos CSS con diversas formas.
🎨 CSS & DesignFrequently Asked Questions
Q ¿Estos íconos son gratuitos para usar?
Q ¿Puedo cambiar el color del ícono?
Q ¿Cómo uso íconos SVG en mi proyecto?
Q ¿Puedo agregar estos íconos a React?
Q ¿Cómo hago que los íconos sean accesibles?
About This Tool
Búsqueda de Iconos is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.