# Icons and colours - Stockline 1.x documentation

> Pick an icon and a colour for each stock state, or keep your theme's.

Each stock state has its own icon and colour, set under its message on the Stock messages screen. They apply even when the message is empty and WooCommerce's text is shown.

## Icons

There are six icons: **Check mark** (the default for in stock), **Warning** (low stock), **Clock** (on backorder), **Cross** (out of stock), **Delivery truck** and **Dot**. Any of them can be used for any state; the delivery truck suits "ships today" or "back next week", and the dot is a quiet marker for when an icon would be too much.

The icons are small line drawings in the same colour as the text, sized to the text, so they fit any font. Choose **No icon** for a state to show the text alone.

> [!NOTE]
> Some themes, such as Storefront, draw their own icon in front of the stock line. When a state has a Stockline icon, the theme's icon is hidden so there's only one. With **No icon**, the theme's icon stays.

## Colours

The defaults are green for in stock, amber for low stock, blue for on backorder and red for out of stock. Click the colour field to pick another, or type a hex code such as `#1a7f37`.

Empty the colour field to keep your theme's colour for that state. Stockline then leaves the text colour entirely to the theme.

The colour is used for the text, the icon and, in the badge style, a light tint of the same colour behind them. See **Badge or plain style**.

> [!TIP]
> Shoppers read colour faster than words, so keep the usual meanings: green for good news, amber or red for urgency. Dark shades read better than bright ones on a white page, especially for the plain style, where the colour is on the text itself.

## Previewing

The **Preview** under each state redraws as you change the message, icon, colour or style, before you save. It uses the same stylesheet as your product pages, though your theme's font and size will differ a little.

Source: https://www.extendiment.com/plugins/stockline/docs/1.x/icons-and-colours