Skip to main content
CYPEX Documentation
    Support
    v2.0.0 Latest stable release View changelog ->
    1. CYPEX — PostgreSQL Application Platform
    2. /
    3. Element Dictionary
    4. /
    5. Various
    6. /
    7. Icon
    Various Referencegenerated

    Icon

    Display an icon

    Technical id
    default_icon_element

    A standalone display vector glyph rendered from a catalog dropdown or custom expression text path, supporting multi-scale scaling boundaries.

    When to use

    • Adding supporting graphic iconography to visually distinguish layout categories or metrics headers.
    • Rendering platform-supported glyph indicators or custom icon expressions within dashboard grids.

    What you need

    • Static branding vectors or state flags evaluated dynamically via text box expression workflows.

    Examples

    • A 1x1 summary card status indicator rendering a warning symbol based on error flag calculations.
    • An information icon badge aligned inside a visual dashboard heading panel tracking help references.

    Avoid

    • Sizing the bounding canvas larger than a 2x2 grid blueprint area, which misuses structural row tracking grids and forces unnecessary white space.
    • Using an independent icon layout block as a standalone interactive link component without descriptive anchor titles.

    Editor properties

    Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

    Icon Settings
    IconrequiredText or Custom expression (text)
    Selects a system vector token name from a large platform catalog or processes an dynamic expression mapping parameter.
    Example account_circle
    Default: account_circle
    ColorrequiredOne of: primary, secondary, success, error, warning, info, default, lighter, disabled, white, black (or not set)
    Sets the icon fill color token via direct dropdown selection or using variable logic textbox values.
    Choices
    • primary — Theme default branding blue color (#007bff).
    • secondary — Muted branding slate gray color (#6c757d).
    • success — Standard transactional green color (#28a745).
    • error — Severe action warning red color (#dc3545).
    • warning — Cautionary yellow color (#ffc107).
    • info — Informing teal/light blue color (#17a2b8).
    • default — Dark charcoal text color (#343a40).
    • lighter
    • disabled — Non-interactive gray color (#adb5bd).
    • white — Plain white color (#ffffff).
    • black — Plain black color (#000000).
    Default: none
    SizerequiredOne of: small, medium, large, fullWidth
    Configures the visual scaling bounds applied to the vector element. Accepts expressional strings or four option states.
    Choices
    • small — Compact footprint for fine utilities inline placement.
    • medium — Standard sizing matching normal text layers balance.
    • large — Prominent dimensions tailored for callout headers.
    • fullWidth — Stretches bounds to expand horizontally across its structural wrapper space.
    Default: none
    Alignment Settings
    Horizontal AlignmentoptionalOne of: start, center, end
    Manages horizontal distribution guidelines within the grid block. Accepts custom logic or option inputs.
    Choices
    • start — Snaps the vector tight against the left container boundary.
    • center — Positions the vector centered along the horizontal track axis.
    • end — Snaps the vector tight against the right container boundary.
    Default: none
    Vertical AlignmentoptionalOne of: start, center, end
    Manages vertical distribution guidelines within the grid block. Accepts custom logic or option inputs.
    Choices
    • start — Aligns the vector tight against the top ceiling layout frame.
    • center — Centers the vector along the vertical boundary track axis.
    • end — Aligns the vector tight against the bottom base floor frame.
    Default: none

    Sizing

    • No size of its own: dropped at the platform default of 1 × 1 grid cells and resized on the page.

    Accessibility

    Automatically appends aria-hidden=‘true’ properties to prevent screen reader software from reading raw font icon token text, ensuring clear focus lines.

    Where you can place it

    Drag this element into one of these containers:

    1
2
3
4
5
6
7

    {
  "config": {
    "icon": "icon",
    "color": "primary",
    "size": "small"
  }
}

    1
2
3
4
5
6
7
8
9

    {
  "config": {
    "icon": "icon",
    "color": "primary",
    "size": "small",
    "horizontalAlignment": "start",
    "verticalAlignment": "start"
  }
}

    Ready-made setups

    Configuring a clean 1x1 dashboard icon tile rendered as a large green checkmark focused perfectly in the center alignment path.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

    {
  "config": {
    "icon_settings": {
      "icon": "check_circle",
      "color": "success",
      "size": "large"
    },
    "alignment_settings": {
      "horizontalAlignment": "center",
      "verticalAlignment": "center"
    }
  }
}