Íconos en botones
Sumá un ícono al principio o al final de cualquier botón, elegido entre más de 20.000.
Un ícono bien puesto hace que un botón se entienda de un vistazo: una flecha que invita a seguir, el logo de WhatsApp para escribirte, una taza para ver el menú de un café. Ahora cualquier botón de tu sitio puede llevar un ícono al principio, al final o en los dos lados.
Un ícono al principio del botón
- Seleccioná el botón y abrí la pestaña Propiedades.
- En Ícono inicial, tocá Seleccionar.
- Buscá el ícono por su nombre en inglés (por ejemplo, coffee, phone o calendar) y hacé clic para elegirlo.
El ícono toma automáticamente el color del texto del botón, así que también cambia cuando el botón cambia de color, por ejemplo al pasar el mouse.
O al final, para invitar a seguir
Con Ícono final el ícono va después del texto. Es ideal para flechas en botones del tipo "Ver más" o "Conocé los planes", o para indicar que un link abre un archivo o un sitio externo.
Más de 20.000 íconos para elegir
El buscador reúne ocho bibliotecas de íconos, y podés filtrar por cada una:
- Material Design Icons, Lucide, Tabler (de línea o rellenos), Heroicons (de línea o rellenos) y Bootstrap Icons, con íconos para casi cualquier cosa.
- Simple Icons, con los logos de miles de marcas: WhatsApp, Instagram, Spotify, Mercado Pago y muchas más.
¿Tu marca tiene sus propios íconos? En la pestaña Subir SVG propio podés pegar el código de cualquier ícono en formato SVG.
Ajustá el tamaño y la separación. En Estilos → Ícono podés cambiar el Tamaño del ícono y el Espaciado entre el ícono y el texto. Como cualquier estilo, también se puede ajustar por dispositivo.
Ideas para usarlos
- Un botón de WhatsApp con su logo para que tus clientes te escriban.
- Flechas en los llamados a la acción para darles dirección.
- Íconos de descarga en botones que abren un PDF, como un menú o un catálogo.
Todo lo que necesitás para crear cualquier página
Arrastrá y soltá secciones, textos, imágenes, botones, galerías, formularios y mucho más. Combiná los elementos libremente para diseñar páginas únicas, sin escribir una sola línea de código.
¿Qué hay de nuevo en Grid?
Estamos constantemente trabajando en mejoras y nuevas herramientas.
