Aqua Basis

Aqua icons are bundled as a font within the main package installation. This means you can use all available icons without the need to install or import any additional packages.

Usage

Icons are applied via CSS classes. We recommend using a standard <em> or <span> HTML tag with the corresponding icon class. For example:

<em class="aq-icon-ips"></em>

<span class="aq-icon-mapping"></span>

Example: Button with Icon and Badge

The following example shows how to use the <aq-button> component with an icon and a badge inside it:

<aq-button variant="primary" type="submit">
  <em class="aq-icon-settings" info="This is a tooltip"></em>
  Button
  <aq-badge status="success">0</aq-badge>
</aq-button>

Notes

The <em> tag uses the aq-icon-settings class to render the settings icon. You can replace this with any available icon class.
The info attribute displays a tooltip on hover.
<aq-badge> displays a badge with a status indicator (in this case, success) and the content 0.

This structure is useful when you want to combine an action button with contextual information and visual feedback.

List

This is the complete list of available icons included in the Aqua Design System.

Icons

https://codepen.io/Fernando-Yara/pen/bNdRgWB

On this page

✨ Design together. Build together. Speak the same language. ✨

back Aqua.png