Quaff

QIcon

Icons represent actions, content, or status with a compact symbol. Use Material Symbols, SVGs, or images, with configurable size and color.

NIGHT ATLAS · FIELD NOTES

A little closer to the sky

An icon for every discovery.

info QIcon API Source
interface QIconProps extends HTMLAttributes<HTMLElement>
color
?: string = undefined
The color of the icon.
filled
?: boolean = false
Determines whether the icon should be filled.
img
?: string = undefined
The image source for the icon.
imgAttributes
?: HTMLImgAttributes = {}
Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.
name
?: MaterialSymbol = undefined
The name of the Material Symbols icon.
size
?: QSize | CssValue | number = "md"
Size of the component to choose between multiple predefined sizes. Also supports CSS size values (e.g. "40px", "1rem"). If a number is provided, it will be converted to a px value.
svg
?: string = undefined
The SVG content for the icon.
type
?: QIconTypeOptions = "outlined"
The type of the icon.

Usage

Observe the Sky
Use name for Material Symbols. Try the three type families, filled, theme or CSS color, and named, numeric or CSS size values.
TONIGHT'S TARGET

Moon

Craters along the terminator

Start with a low-power eyepiece.

Filled symbol
Field Guide Legend
Pair color with text so meaning is never color alone. The color prop and utilities such as text-tertiary both work. These icons are decorative because the adjacent labels carry their meaning.

Naked eye

Find the brightest constellations.

Binoculars

Explore wide fields of stars.

Telescope

Take a closer look at the Moon.

Images and Custom Artwork
Use img with imgAttributes for image attributes, or supply SVG as children. The svg prop renders a string as HTML: only pass trusted SVG content.
Night Atlas observatory emblem

The observatory patch

An image with its own alternative text.

A telescope of our own

SVG children inherit the icon color and size.

Connect the dots

A trusted SVG string from our field guide.

Accessibility
An icon with an aria-label is exposed as an image. Inside an icon-only button, label the button and hide the decorative icon with aria-hidden.
cloud_off

Evening observation

North terrace · Field note 014

Save this observation for your next clear night.

Privacy Policy