Tesserae

IconTile

Description

The rounded, tinted square that leads a row: a glyph, a few letters, or a small component

IconTile is the square that leads a row: a glyph, a few letters ("PPTX", "CSV") or a small component of your own, drawn over a pale wash of one colour. It is the tile OmniResult puts in front of every search result, Banner in front of its message and Metric beside its value.

You pass one colour: the one the glyph keeps. The tile behind it is computed from that colour — a light wash of it under a light theme, a deep one under a dark theme, with the glyph lifted until it reads — and cached, so a list drawing the same handful of colours pays for each of them once. That leaves you picking only the colour that means something ("red is an error"), never the four that draw it.

Usage

Create a tile with IconTile(icon, color, weight) for a glyph, IconTile(text, color, size) for a few letters, or IconTile(component, color) for an image, an Avatar or an emoji. new IconTile() gives an empty one, and the matching SetIcon overloads swap what is on it later. A null colour leaves the tile neutral.

Letters are drawn uppercase and bold, and measured: a word wider than the tile is drawn smaller so "PPTX" or "PARQUET" fits instead of being clipped, while three letters keep the full size at any tile size. Passing a TextSize pins the size and opts out of that fitting. An image fills the tile (object-fit: cover).

Size(UnitSize) sets how big the tile is (34px square by default) and the glyph follows it, unless GlyphSize(UnitSize) pins the glyph instead. Rounded(UnitSize) sets the corner radius (8px by default) and Circular() makes it a circle. Tint(color) re-tints without touching what is on the tile; null or empty puts it back to neutral.

API reference

class

IconTile

public sealed class IconTile : ComponentBase<IconTile, HTMLElement>

The rounded, tinted square that leads a row: a glyph, a few letters ("PPTX", "CSV") or a small component of the host's own, drawn over a pale wash of one color. It is the tile OmniResult{T} puts in front of every search result, Banner in front of its message and Metric beside its value - one shape, one way of tinting it, wherever something needs to be marked with what it is. The one color the host passes is the color the glyph keeps; the tile behind it is computed from that color - a light wash of it under a light theme, a deep one under a dark theme - so a host only ever picks the color that means something ("red is an error"), never the four that draw it.

Namespace
Tesserae
Inheritance
ComponentBase<IconTile, HTMLElement> → IconTile

Constructors

NameDescription
IconTileInitializes a new instance of this class, empty and untinted. Fill it with one of the SetIcon overloads.
Constructor
IconTile
Overload
IconTile()Initializes a new instance of this class, empty and untinted. Fill it with one of the SetIcon overloads.
IconTile(UIcons, string, UIconsWeight)Initializes a new instance of this class showing the given icon, in the given color.
IconTile(string, string, TextSize?)Initializes a new instance of this class showing the given short text, in the given color.
IconTile(IComponent, string)Initializes a new instance of this class showing the given component, optionally tinted.
IconTile()
public IconTile()

Initializes a new instance of this class, empty and untinted. Fill it with one of the SetIcon overloads.

IconTile(UIcons, string, UIconsWeight)
public IconTile(UIcons icon, string color = null, UIconsWeight weight = UIconsWeight.Regular) : this()

Initializes a new instance of this class showing the given icon, in the given color.

Parameters

icon UIcons
color string
weight UIconsWeight
IconTile(string, string, TextSize?)
public IconTile(string text, string color = null, TextSize? size = null) : this()

Initializes a new instance of this class showing the given short text, in the given color.

Parameters

text string
color string
size TextSize?
IconTile(IComponent, string)
public IconTile(IComponent iconOrImage, string color = null) : this()

Initializes a new instance of this class showing the given component, optionally tinted.

Parameters

iconOrImage IComponent
color string

Methods

NameDescription
SetIconPuts the given icon on the tile, in the given color, over a paler wash of that same color. Pass the full-strength color the glyph should be - the background is computed from it (and cached), a light tint of it under a light theme and a deep one under a dark theme. A null color leaves the tile in the neutral, untinted colors.
SizeSets how big the tile is drawn - 34px square by default, the size a result row wants. The glyph (or the letters) inside it scale with it unless GlyphSize says otherwise.
GlyphSizeSets how big the glyph - or the text - inside the tile is drawn. By default it follows the tile's own size (about 45% of it), which is what keeps a bigger tile from holding a tiny icon.
RoundedSets how round the tile's corners are - 8px by default. Pass 50.percent() for a circle.
CircularDraws the tile as a circle.
TintRe-tints the tile from the given color without touching what is on it. A null or empty color puts it back in the neutral, untinted colors.
RenderRenders the component's root HTML element.
Method
IconTile.SetIcon
Overload
SetIcon(UIcons, string, UIconsWeight)Puts the given icon on the tile, in the given color, over a paler wash of that same color. Pass the full-strength color the glyph should be - the background is computed from it (and cached), a light tint of it under a light theme and a deep one under a dark theme. A null color leaves the tile in the neutral, untinted colors.
SetIcon(string, string, TextSize?)Puts the given short text on the tile in place of an icon - a file type, "PPTX" or "CSV", where no glyph says it as plainly - in the given color, over a paler wash of that same color. It is drawn at the size the tile is sized for, shrunk to fit when the word is wider than the tile: the text is measured, so what fits is decided by the letters themselves rather than by counting them, and a three-letter type keeps the full size whatever the tile's size is. Pass size to pin a TextSize instead, which opts the text out of the fitting.
SetIcon(IComponent, string)Puts the given component on the tile - an Image thumbnail, an Avatar, an emoji - optionally tinting the tile with the given color.
SetIcon(UIcons, string, UIconsWeight)
public IconTile SetIcon(UIcons icon, string color = null, UIconsWeight weight = UIconsWeight.Regular)

Puts the given icon on the tile, in the given color, over a paler wash of that same color. Pass the full-strength color the glyph should be - the background is computed from it (and cached), a light tint of it under a light theme and a deep one under a dark theme. A null color leaves the tile in the neutral, untinted colors.

Parameters

icon UIcons
color string
weight UIconsWeight
SetIcon(string, string, TextSize?)
public IconTile SetIcon(string text, string color = null, TextSize? size = null)

Puts the given short text on the tile in place of an icon - a file type, "PPTX" or "CSV", where no glyph says it as plainly - in the given color, over a paler wash of that same color. It is drawn at the size the tile is sized for, shrunk to fit when the word is wider than the tile: the text is measured, so what fits is decided by the letters themselves rather than by counting them, and a three-letter type keeps the full size whatever the tile's size is. Pass size to pin a TextSize instead, which opts the text out of the fitting.

Parameters

text string
color string
size TextSize?
SetIcon(IComponent, string)
public IconTile SetIcon(IComponent iconOrImage, string color = null)

Puts the given component on the tile - an Image thumbnail, an Avatar, an emoji - optionally tinting the tile with the given color.

Parameters

iconOrImage IComponent
color string
Method
IconTile.Size
public IconTile Size(UnitSize size)

Sets how big the tile is drawn - 34px square by default, the size a result row wants. The glyph (or the letters) inside it scale with it unless GlyphSize says otherwise.

Method
IconTile.GlyphSize
public IconTile GlyphSize(UnitSize size)

Sets how big the glyph - or the text - inside the tile is drawn. By default it follows the tile's own size (about 45% of it), which is what keeps a bigger tile from holding a tiny icon.

Method
IconTile.Rounded
public IconTile Rounded(UnitSize radius)

Sets how round the tile's corners are - 8px by default. Pass 50.percent() for a circle.

Method
IconTile.Circular
public IconTile Circular()

Draws the tile as a circle.

Method
IconTile.Tint
public IconTile Tint(string color)

Re-tints the tile from the given color without touching what is on it. A null or empty color puts it back in the neutral, untinted colors.

Method
IconTile.Render
public override HTMLElement Render()

Renders the component's root HTML element.

class

IconTileTextFit

internal static class IconTileTextFit

How much an IconTile has to scale its letters down to keep them inside the tile. The tile clips what does not fit (overflow: hidden), and three bold capitals are all the 35% of the tile's side the stylesheet draws them at has room for - so "PPTX" or "PARQUET" would be cut off. The answer is a scale rather than a size, which is what lets one measurement serve every tile: both the room and the letters scale with the tile, so the tile's own size cancels out of the comparison and the same word fits identically at 22px and at 34px. It is published as --tss-icontile-text-fit, and tss.icontile.css hands it to a scale(), which composes with whatever font size the cascade chose for that tile instead of overriding it. The width is measured, so it is the letters that decide and not how many of them there are ("MAIL" is a fifth narrower than "DRAW"). It is measured on a canvas rather than by laying a hidden span out and reading its box: same shaper, same numbers to within a hundredth of a percent, but nothing is added to the document and no layout is forced in the middle of building a list of results. The words a tile is given are file types, and there are only so many of those - so the ones listed in _known were measured once, on the font stack Tesserae draws with, and ship as numbers. A tile holding one of them measures nothing at all; anything else is measured on first sight and remembered.

Namespace
Tesserae

Methods

NameDescription
ApplyPublishes onto the tile the scale the given text has to be drawn at to stay inside it, or takes the property away when the word fits as it is.
Method
IconTileTextFit.Apply
internal static void Apply(HTMLElement tile, string text)

Publishes onto the tile the scale the given text has to be drawn at to stay inside it, or takes the property away when the word fits as it is.

class

IconTint

internal sealed class IconTint

The colors an IconTile is drawn with, derived from the one color the host passed: the glyph in that color and the tile in a wash of it, in a light and a dark variant.

Namespace
Tesserae
class

IconTints

internal static class IconTints

Computes - and remembers - the tile colors derived from a given icon color. A list of results usually draws the same handful of colors over and over (one per file type), and every one of them costs a parse and two HSL round-trips, so the results are cached by the color they came from.

Namespace
Tesserae

See also

© 2026 Curiosity. All rights reserved.