Configuración de icono

Selección de icono

Puntos:
selecciona el icono a mostrar. Ayuda a complementar significados que el texto por sí solo no transmite bien.

Qué cambia este ajuste:
mejora velocidad de reconocimiento visual al añadir un punto de atención.

Consejo de ajuste:
elige iconos que refuercen el texto sin duplicarlo ni contradecirlo.

Elementos de configuración

• Selección de icono: elige el icono a mostrar.
• Color de icono (en UI de selección): define color y coherencia con texto/fondo.
• Grosor de trazo (iconos de línea): ajusta visibilidad del trazo (predeterminado 1.75; con 0, usa el grosor original).
• Responsivo: permite iconos distintos por dispositivo.

también puedes cambiar a otro icono en Hover.

Condición para no mostrar icono:
si no hay icono seleccionado y el tamaño del marco de icono es 0, el área de icono no se emite en HTML (no aparece en DOM). Si el marco tiene tamaño o fondo configurado, puede mostrarse solo el marco aunque no haya icono.

Optimización responsive de iconos:
por defecto se emite solo icono para PC. Para usar iconos diferentes en MD/TB/SP, activa Responsivo. El cambio entre iconos responsive se hace con display: none/flex, por lo que no aplica transición de fade.

Color de icono

Puntos:
define el color del icono manteniendo equilibrio con texto y fondo.

Qué cambia este ajuste:
si destaca demasiado genera ruido; si es demasiado débil, pierde función.

Consejo de ajuste:
empieza con color similar al texto y usa color acento solo cuando haga falta.

Elementos de configuración

• Color: define color del icono.
• Alpha: define transparencia.
• Responsivo: habilita ajustes por dispositivo.

Tamaño de icono

Puntos:
define tamaño del icono según nivel de énfasis deseado.

Qué cambia este ajuste:
diferencias grandes de tamaño pueden desbalancear el centro visual del botón.

Consejo de ajuste:
toma como base 0.9x a 1.2x del tamaño de texto y ajusta fino.

Elementos de configuración

• Valor de tamaño: define tamaño del icono.
• Unidad (px / em / rem): define comportamiento fijo o relativo.
• Responsivo: habilita ajustes por dispositivo.

el tamaño de icono en Hover también puede ajustarse. Con unidad em, el tamaño se sincroniza con la fuente y mantiene mejor equilibrio.

Posición de icono

Puntos:
ajusta posición y desplazamiento para controlar distancia/alineación con el texto.

Qué cambia este ajuste:
una posición inadecuada reduce legibilidad y claridad de intención.

Consejo de ajuste:
parte de alineación centrada y mueve X/Y en pasos pequeños.

Elementos de configuración

• X Posición (left / center / right + valor): ajusta posición horizontal.
• Y Posición (top / center / bottom + valor): ajusta posición vertical.
• Unidad (px / % / vw): define cómo responde el desplazamiento.
• Responsivo: habilita ajustes por dispositivo.

Marco de icono

Puntos:
define marco/fondo del icono para destacarlo como elemento independiente.

Qué cambia este ajuste:
útil para crear jerarquía visual en CTA.

Consejo de ajuste:
si refuerzas mucho el marco, reduce un nivel de decoración del botón principal.

Elementos de configuración

• Tamaño > Set Ancho and Alto Individually: gestiona ancho y alto por separado.
• Tamaño > Tamaño en lote + Unidad: ajusta rápidamente marco cuadrado base.
• Tamaño > Ancho/Alto individual + Unidad: ajuste fino de proporción y márgenes.
• Tamaño > Responsivo: ajusta tamaño del marco por dispositivo.
• Color > Background Color: define color de fondo del marco.
• Color > Alpha: define transparencia del fondo del marco.
• Color > Gradient: cambia a fondo degradado.
• Color > Responsivo: ajusta densidad/color por dispositivo.
• Borde > Display Posición (T/R/B/L): elige lados donde mostrar borde.
• Borde > Style: tipo de línea del marco.
• Borde > Color + Alpha: color/transparencia del borde.
• Borde > Tamaño: grosor de línea.
• Borde > Responsivo: ajuste de borde por dispositivo.
• Radio de borde > Radius: redondeo del marco.
• Radio de borde > Unidad (px / %): valor fijo o proporcional.
• Radio de borde > Responsivo: ajuste de radio por dispositivo.
• Transición > Duration / Delay / Suavizado / Valor personalizado / Restablecer: velocidad de cambio del marco en Hover.

marco de icono también admite ajustes separados en Hover. Su transición es independiente de la transición del icono principal.

Transición

Puntos:
define la velocidad de cambio de estado normal a Hover.

Qué cambia este ajuste:
demasiado rápido se siente brusco; demasiado lento, poco reactivo.

Consejo de ajuste:
usa Duration 200-350ms como base y añade delay/easing personalizado solo en casos necesarios.

Elementos de configuración

• Duración (ms): tiempo del cambio.
• Retardo (ms): espera antes de iniciar.
• Suavizado: curva de velocidad.
• Valor personalizado: curva personalizada (cubic-bezier).
• Restablecer: restablece esta sección.

esta transición se aplica a color, tamaño y posición del icono. La transición del marco y la animación de icono se configuran por separado.