# Glass Icons

> Liquid glass icons that bend the color behind them, for app grids, docks and social links.

Each icon is a pane of glass over a colored card. A WebGL2 shader refracts the card through the curved glass edge, with optional rainbow dispersion, frost and a pointer-tracked highlight. The icons settle in with a staggered entrance the first time they scroll into view. Hover to lift, float or press the glass; move the pointer to drift the card behind it.

<demo-glass-icons>



</demo-glass-icons>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/glass-icons.json"
```

## Usage

```vue
<script setup lang="ts">
  import GlassIcons from '~/components/ui/glass-icons/GlassIcons.vue';
  import type { GlassIconsItem } from '~/components/ui/glass-icons/types';

  const items: GlassIconsItem[] = [
    { icon: 'lucide:folder', color: 'blue', label: 'Files' },
    { icon: 'lucide:book', color: 'purple', label: 'Books' },
    { icon: 'lucide:heart', color: 'red', label: 'Health' },
    { icon: 'lucide:cloud', color: 'indigo', label: 'Weather' },
    { icon: 'lucide:sticky-note', color: 'orange', label: 'Notes' },
    {
      icon: 'lucide:github',
      color: 'linear-gradient(135deg, #4a4752, #1d1b22)',
      label: 'GitHub',
      href: 'https://github.com',
      target: '_blank',
    },
  ];
</script>

<template>
  <GlassIcons :items="items" plate="tilt" hover="press" labels="hover" />
</template>
```

Without WebGL2 the component falls back to CSS: plain colored cards behind a `backdrop-filter` blur, with baked shine and shade maps. With `plate="none"` in Chromium, clear glass refracts the real page behind it through an SVG displacement filter.

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        items
      </code>
    </td>
    
    <td>
      <code>
        GlassIconsItem[]
      </code>
    </td>
    
    <td>
      <code>
        []
      </code>
    </td>
    
    <td>
      Icons to show (see below).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        82
      </code>
    </td>
    
    <td>
      Width and height of each icon in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gap
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        66
      </code>
    </td>
    
    <td>
      Space between the icons in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        columns
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      Icons per row. They wrap to fewer columns when there is not enough room.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        roundness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Corner rounding, from 0 for square to 1 for a circle.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        refraction
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.8
      </code>
    </td>
    
    <td>
      How strongly the glass bends what is behind it around its edge (0–1.5).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        bevel
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Width of the curved glass edge, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dispersion
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Rainbow fringing where the edge bends the light, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        frost
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.2
      </code>
    </td>
    
    <td>
      How much the glass blurs what is behind it, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shine
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.85
      </code>
    </td>
    
    <td>
      Strength of the light catching the glass edge, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tint
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#dfdfdf'
      </code>
    </td>
    
    <td>
      Color of the glass.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tint-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.2
      </code>
    </td>
    
    <td>
      How strongly the tint colors the glass, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        icon-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Icon color. Defaults to white, or near black on clear glass in the light theme.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        plate
      </code>
    </td>
    
    <td>
      <code>
        'tilt' | 'offset' | 'circle' | 'none'
      </code>
    </td>
    
    <td>
      <code>
        'tilt'
      </code>
    </td>
    
    <td>
      Colored shape behind the glass: a tilted card, a shifted card, a disc or nothing for clear glass.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tilt
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        30
      </code>
    </td>
    
    <td>
      Angle of the tilted card in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spread
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How far the shifted card or disc peeks out from behind the glass, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hover
      </code>
    </td>
    
    <td>
      <code>
        'lift' | 'float' | 'press' | 'none'
      </code>
    </td>
    
    <td>
      <code>
        'press'
      </code>
    </td>
    
    <td>
      Hover animation. Lift raises the glass and swings the card, float raises it, press pushes it in.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        parallax
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How far the card behind the glass drifts with the pointer, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        labels
      </code>
    </td>
    
    <td>
      <code>
        'hover' | 'always' | 'none'
      </code>
    </td>
    
    <td>
      <code>
        'hover'
      </code>
    </td>
    
    <td>
      When the labels under the icons are shown.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Plays an entrance the first time the icons scroll into view: the glass settles and the cards swing.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        theme
      </code>
    </td>
    
    <td>
      <code>
        'dark' | 'light'
      </code>
    </td>
    
    <td>
      <code>
        'dark'
      </code>
    </td>
    
    <td>
      Color scheme of the labels and glass edges.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the container.
    </td>
  </tr>
</tbody>
</table>

### GlassIconsItem

<table>
<thead>
  <tr>
    <th>
      Field
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Iconify icon name, e.g. <code>
        'lucide:folder'
      </code>
      
      . Use the <code>
        icon
      </code>
      
       slot for custom markup.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Accessible name and the label under the icon.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Preset (<code>
        blue
      </code>
      
      , <code>
        purple
      </code>
      
      , <code>
        red
      </code>
      
      , <code>
        indigo
      </code>
      
      , <code>
        orange
      </code>
      
      , <code>
        green
      </code>
      
      , <code>
        teal
      </code>
      
      , <code>
        pink
      </code>
      
      , <code>
        graphite
      </code>
      
      , <code>
        silver
      </code>
      
      ) or any color/gradient.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        href
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Renders the icon as a link instead of a button.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        target
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Link target. <code>
        _blank
      </code>
      
       adds <code>
        rel="noreferrer"
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        onClick
      </code>
    </td>
    
    <td>
      <code>
        (event: MouseEvent) => void
      </code>
    </td>
    
    <td>
      Click handler.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        id
      </code>
    </td>
    
    <td>
      <code>
        string | number
      </code>
    </td>
    
    <td>
      Stable key.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        className
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Extra classes for the icon.
    </td>
  </tr>
</tbody>
</table>

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Props
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      <code>
        { item, index }
      </code>
    </td>
    
    <td>
      Replaces the Iconify glyph with your own content.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- Each icon is a real `<button>` (or `<a>` with `href`) named by its `label`.
- Keyboard focus shows a ring around the glass and reveals the hover label; focus also plays the hover pose.
- With `prefers-reduced-motion: reduce` the entrance and springs jump straight to their end state.
- Ported from [React Bits](https://reactbits.dev/components/glass-icons) by David Haz.