Skip to main content

Búsqueda de Iconos Busca y personaliza iconos SVG de código abierto con tamaño, color y trazo ajustables.

Búsqueda de Iconos illustration
🎨

Búsqueda de Iconos

Busca y personaliza iconos SVG de código abierto con tamaño, color y trazo ajustables.

1

Buscar íconos

Escribe una palabra clave para filtrar íconos por nombre en múltiples categorías.

2

Personalizar la apariencia

Ajusta el color, tamaño y ancho del trazo del ícono para que coincida con tu diseño.

3

Copiar el SVG

Haz clic en un ícono para copiar su código SVG personalizado.

Loading tool...

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

  • 1
    Utiliza íconos basados en trazos para un estilo coherente en todo tu proyecto
  • 2
    Establece el color del trazo en currentColor para heredar automáticamente el color del texto
  • 3
    Mantén los tamaños de los íconos consistentes; 24px es un tamaño estándar común
  • 4
    Agrega aria-label para botones de íconos accesibles sin texto visible

Related Tools

Frequently Asked Questions

Q ¿Estos íconos son gratuitos para usar?
Sí, todos los íconos en esta herramienta son de código abierto y gratuitos para uso personal y comercial.
Q ¿Puedo cambiar el color del ícono?
Sí, ajusta el selector de colores para cambiar el color del trazo de todos los íconos.
Q ¿Cómo uso íconos SVG en mi proyecto?
Pega el código SVG directamente en tu HTML, úsalo como src de una etiqueta <img> o conviértelo en un componente de React.
Q ¿Puedo agregar estos íconos a React?
Sí, pega el código SVG en un componente de React o utiliza una herramienta de conversión de SVG a React.
Q ¿Cómo hago que los íconos sean accesibles?
Agrega aria-label para botones de íconos independientes, o aria-hidden="true" cuando se acompañen de texto visible.

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.