Documentation
v1.5.1Getting Started
Dynamic island
Visual effects
Animated text
Interaction
Animated
What is it?
Glow icon adds a dynamic, neon-like glow to icons or text elements on a webpage, creating a futuristic and visually striking appearance. It leverages customizable configurations for colors, intensity, and animations, enabling seamless integration into different design themes.
How to set it up?
To set up the Glow icon element, configure the following attributes on the icon element:
'data-neon="true'. Enables the Glow Icon effect on the element. This attribute is required for the effect to be applied. Remember that you must set the attribute value to ‘true’ (without the quotes) to activate it.
- blue (default)
- red
- green
- purple
- white
- gold
- cyan
'data-neon-custom-color' (Optional). Overrides the predefined neon color presets by providing a custom primary color (in hex format). Example: data-neon-custom-color="#ff5733"
'data-neon-intensity' (Optional). Adjusts the intensity of the glow and stroke effect. Available options are:
- low: Subtle glow with thin strokes.
- medium: Balanced glow and stroke (default).
- high: Strong glow with thicker strokes.
'data-neon-flicker' (Optional). Adds a flickering animation to simulate a retro neon light. Example: data-neon-flicker="true"