Icon Tile

A 22px icon well with an inner glass stroke. Use it to mark a row in a nav or settings list.

Colors

Eight tones on design tokens. Each fill is a 135deg ramp around the source hex — not a flat color.


        
          1
          
          <IconTile :icon="CircleUser" variant="blue" />
        

          2
          
          <IconTile :icon="Smile" variant="green" />
        

          3
          
          <IconTile :icon="Palette" variant="pink" />
        

          4
          
          <IconTile :icon="Settings" variant="gray" />

From hex

Pass color as a hex. The source sits in the middle of the ramp: #9D9DA4 becomes #ADADB4 to #8E8E95.


        
          1
          
          <IconTile :icon="Settings" color="#9D9DA4" />

Sizes

small is 22px — the nav default. medium is 28px, large is 32px.


        
          1
          
          <IconTile :icon="CircleUser" size="small" />
        

          2
          
          <IconTile :icon="CircleUser" size="medium" />
        

          3
          
          <IconTile :icon="CircleUser" size="large" />

Theme sync

Pass theme-sync to follow light and dark. Light keeps the colored well and white glyph. Dark switches to a graphite plate with a colored glyph.


        
          1
          
          <IconTile :icon="CircleUser" variant="blue" theme-sync />
        

          2
          
          <IconTile :icon="Smile" variant="amber" theme-sync />
        

          3
          
          <IconTile :icon="Palette" variant="pink" theme-sync />
        

          4
          
          <IconTile :icon="Settings" variant="gray" theme-sync />

In a list

Pair the tile with a label. Keep one tile per row; do not stack them as a filter group.

AvatarIconsColorsSettings


        
          1
          
          <a class="flex items-center gap-2.5">
        

          2
          
            <IconTile :icon="CircleUser" variant="blue" />
        

          3
          
            <span>Avatar</span>
        

          4
          
          </a>

Best practices

Pass a Lucide component through icon. Keep the glyph at the size IconTile already sets — do not wrap a second Icon at 24px.
small is for sidebars and dense lists. Jump to medium or large only when the tile is the primary mark on a card or empty row.
Pick a tone that stays distinct from its neighbors. Repeating blue on every row removes the scan value.
The glass stroke is decorative. Do not add an extra border or drop shadow around the tile.
For a custom fill, pass color as hex. Do not set background-image yourself — iconTileGradientFromHex already builds the ramp.
Use theme-sync in nav and settings rows so dark appearance gets the graphite plate. Leave it off when the tile should stay a colored well in both appearances.