> For the complete documentation index, see [llms.txt](https://everyday-digital.gitbook.io/authoring-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/icon-+-text.md).

# Icon + Text

<figure><img src="/files/njsbBCOtfjcwqwl95n4s" alt=""><figcaption></figcaption></figure>

## What is an Icon +Text page?

The Icon + Text page allows you to use iconography to complement the content.

## Quick steps: how to create & edit an Icon + Text page

1. **Open Authoring.** Create or open a [Learning Story](/authoring-docs/authoring/content-types/learning-story.md), [Assessment](/authoring-docs/authoring/content-types/assessment.md) or [Survey](/authoring-docs/authoring/content-types/survey.md) [content type](/authoring-docs/authoring/content-types.md).
2. **Open the Editor.**
3. **Add an Icon + Text page.** Select the + icon and choose Icon + Text from the Add Page options. Alternatively, open an existing Icon + Text page.
4. **Edit the Icon + Text page.** Select the page to view the [Page Options](/authoring-docs/content-pages/story-and-page-settings.md#what-are-the-page-options), and select Update to add and edit content. The icon must be at least 320x320px and in .svg, .jpg or .png format. Use the text space to enter the text that will display below your icon.
5. **Format text layout and style.** Use the toolbar for basic text [formatting](#text-formatting-tools), and toggle to [Advanced Settings ](#icon-+-text-advanced-settings)for further layout options.

## Icon + Text Advanced Settings

**Border**\
A thin white border is added to icons by default.

**Border**\
A thin white border is added to icons by default.

**Border Colour**\
The border is white by default, but can be changed to black.

**Opacity/Alpha**\
Adjust the icon opacity.

**Radius**\
Adjust the icon border radius.

**Background colour**\
Select a different background colour to override the theme default.

**Background Gradient** \
Choose a second colour to create a gradient background.

## Icon + Text Tips and FAQs

### How to format an Image + Text page

**Text formatting.** Refer to text formatting toolbar options in the [Text page](/authoring-docs/content-pages/content-page-library/text.md)

**Image formatting.** Refer to the [Advanced Settings.](#icon-+-text-advanced-settings)

{% hint style="warning" %}
If you choose custom colours for your text, those colours will also be used in Dark Mode. Only default font colours will auto-adjust in Dark Mode.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/icon-+-text.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.