Icon Settings

Icon Selection

Key Point:
Choose the icon to display. Icons help convey meaning that text alone may not communicate effectively.

What this changes:
Adding an icon creates an additional visual anchor, helping users process information faster.

Adjustment tips:
Select an icon that complements — rather than duplicates or contradicts — the button text to reduce cognitive load.

Settings

• Icon Selection: Select the icon to display and reinforce the button's meaning.
• Icon Color (within the selection UI): Choose the icon color to maintain consistency with text and background.
• Stroke Width (line icons): Adjust the thickness of line-style icons for optimal visibility. The default value is 1.75. Setting the value to 0 displays the icon at its original stroke width.
• Responsive: Allows different icons per device. For example, you can switch to a simpler icon on mobile.

You can also set a different icon for the hover state. Hover icons can be configured individually per device.

When the icon is hidden:
If no icon is selected and the Icon Frame size is 0, the entire icon area will not be rendered in the HTML (it does not exist in the DOM). If the Icon Frame has a size or background color set, the frame will still appear even without an icon selected.

Responsive icon optimization:
By default, only the PC icon is output — MD/TB/SP icons are omitted. To use different icons per device, you must enable the "Responsive." Switching between responsive icons uses display: none/flex, so transitions (fade effects) are not applied.

Icon Color

Key Point:
Set the icon color. Ensure visibility while maintaining harmony with the text and background.

What this changes:
An icon that stands out too much becomes visual noise, while one that's too subtle loses its presence.

Adjustment tips:
Start by matching the text color, then switch to an accent color only where emphasis is needed to maintain consistency.

Settings

• Color: Set the color to adjust the element's visibility and design coherence.
• Alpha: Set the transparency to control the blending intensity with overlapping elements.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Icon Size

Key Point:
Set the icon size. Adjust it to an appropriate level of visual prominence as a supporting element.

What this changes:
If the size difference is too large, the visual balance of the button shifts.

Adjustment tips:
Start at 0.9x to 1.2x of the body text size, then fine-tune by checking vertical alignment.

Settings

• Size value: Set the icon size value to balance it against the main button text.
• Unit (px / em / rem): Specify the icon size unit to choose between relative and fixed behavior.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Hover-state icon size can also be set independently. Changing the size on hover creates an animation-like effect. Using the em unit links the icon size to the font size, automatically maintaining balance with the text.

Icon Position

Key Point:
Set the icon position and offset. Adjust the distance and alignment relative to the button text.

What this changes:
Placement affects both readability and how clearly the click intent is communicated.

Adjustment tips:
Start with center alignment as a baseline, then shift X/Y values in small increments only when needed to avoid breaking the layout.

Settings

• X Position (left / center / right + value): Set the horizontal position to adjust the distance from the text.
• Y Position (top / center / bottom + value): Set the vertical position to balance the top and bottom alignment.
• Unit (px / % / vw): Select the positioning unit to determine how the icon responds to screen width changes.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Icon Frame

Key Point:
Set the icon's background frame. This allows the icon to stand out as an independent visual element.

What this changes:
Useful for CTAs where you want to create a visual information hierarchy.

Adjustment tips:
When applying a strong frame, tone down the main button styling by one level to maintain overall balance.

Settings

• Size > Set Width and Height Individually: Switch to separate width and height controls. Use this for tall or wide frames.
• Size > Uniform size + unit: Adjust a square frame size uniformly. Set the base size here first for efficiency.
• Size > Individual Width / Height + unit: Set individual dimensions for precise control over icon proportions and spacing.
• Size > Responsive: Adjust frame dimensions per device to prevent cramped layouts on mobile.
• Color > Background Color: Set the frame background color. Choose a color that does not compete with the main button.
• Color > Alpha: Set the background color transparency. Reduce this first if the color feels too strong.
• Color > Gradient: Switch to a gradient background for added depth or decorative effect.
• Color > Responsive: Adjust color intensity per device to maintain readability.
• Border > Display Position (T/R/B/L): Specify which sides display a border for partial accent effects.
• Border > Style: Select the line style to adjust the frame's tone (solid/light).
• Border > Color + Alpha: Set the border color and transparency to define the boundary against the background.
• Border > Size: Adjust the line thickness. Be careful not to make the border more prominent than the icon itself.
• Border > Responsive: Optimize line thickness and prominence per device.
• Border Radius > Radius: Set the corner roundness of the frame. Keep the main button shape in mind for consistency.
• Border Radius > Unit (px / %): Choose between a fixed value or percentage to maintain the same look across different sizes.
• Border Radius > Responsive: Adjust Border Radius per device to prevent distorted appearance.
• Transition > Duration / Delay / Easing / Custom Value / Reset: Set the speed of frame changes on hover to control the intensity of the effect.

Icon Frame also supports independent hover-state settings. Changing the frame color or Border Radius on hover can enhance the button interaction feedback. Frame Transition settings are independent from the icon's own Transition settings.

Transition

Key Point:
Set the speed of change from the normal state to the hover state. This controls the "feel" of the interaction.

What this changes:
If too fast, the change goes unnoticed; if too slow, it feels sluggish.

Adjustment tips:
Start with a Duration of 200-350ms as a baseline, then add delay or custom Easing only where enhanced effects are needed.

Settings

• Duration (ms): Set the duration of the change to control the responsiveness.
• Delay (ms): Set the delay before the change starts to adjust the timing of the effect.
• Easing: Set the speed curve to shape the feel of the motion.
• Custom Value: Specify a custom Easing value (CSS cubic-bezier format) for fine-tuned control over the icon change behavior.
• Reset: Reset this section's settings to their defaults.

This Transition applies to hover changes for icon color, size, and position. Icon Frame Transition and icon animation Transition are each configured independently.

Related FAQ

• 動畫不會播放 – ZenBlocks buttonBasic