> For the complete documentation index, see [llms.txt](https://helpdesk.smaply.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helpdesk.smaply.app/journey-maps/cards/how-to-use-icon-cards.md).

# How to use icon cards

Icon cards show a set of labelled icons on a card, like the channels a step happens on, a checklist, or a row of statuses. Icons laid out in a row reflow to fit the card's width, so the layout holds up whether the card is wide or narrow.

<figure><img src="/files/mkivEnaL9Sg6F2Gpu0Aa" alt="An icon card in a Channels lane on a journey map. The card stacks six labelled icons: a red Email envelope, an SMS bubble, an orange Notification bell, a blue Facebook badge, a green Phone handset, and an In person figure."><figcaption><p>An icon card built from the Channels template</p></figcaption></figure>

To add one, hover an empty cell and click **+ Add card**. **Icons** is the default in a lane set up for icons (press Enter to confirm) and sits under **BASIC CARDS** in the picker in any other lane. A new card reads **Add icons card** with a **Choose a template** button. For the shared add-card mechanics, see [How to add and edit cards](/journey-maps/cards/how-to-add-and-edit-cards.md).

<figure><img src="/files/4znQqMs1zELJdGuG84Fo" alt="A populated icon card next to a new, empty icon card. The new card reads Add icons card with a Choose a template button."><figcaption><p>A new icon card before a template is chosen</p></figcaption></figure>

***

#### How to choose an icon template

Click **Choose a template** to open the **Choose a template** dialog. Pick a template to fill the card with a starting set of icons you can then adjust.

<figure><img src="/files/5R8Gqh9njovLmXn0vQvw" alt="The Choose a template dialog listing seven templates as cards with an icon and a name, most with a one-line description: Channels (Communication channels), Checklist (Steps or tasks), Social (Social media platforms), Quote (Highlight quotes or insights), Emojis (Expressive emoji set), Single (Start from scratch), and Social Media."><figcaption><p>The Choose a template dialog</p></figcaption></figure>

The default set is **Channels**, **Checklist**, **Social**, **Quote**, **Emojis**, and **Single**, and your account may have more, like the **Social Media** template shown in the dialog above. The template sets the card's starting icons, colours, and layout. Everything it gives you can be changed on the card afterwards, so pick the template closest to what you need and adjust from there.

{% hint style="info" icon="compass" %}
To build or change the templates this dialog offers, see [How to use icon templates](/account-and-team/customization/how-to-use-icon-templates.md).
{% endhint %}

***

#### How to add and edit icons

Select the card and click **Icons** on the floating toolbar to open **Edit icons**, which lists every icon on the card.

<figure><img src="/files/B4tD9GrLYlp6BTOleSed" alt="The Edit icons popover listing six icon rows (Email, SMS, Notification, Facebook, Phone, In person), each with a drag handle, an icon swatch, a label field, a link icon, and a delete icon, with an Add icon link below."><figcaption><p>Edit icons</p></figcaption></figure>

Each row has a drag handle to reorder it, the icon, a label field, a link icon to point the icon at a URL, and a delete icon to remove the row. Edit the label inline and changes save as you go. Click **+ Add icon** to add a row.

Click a row's icon to open **Customize icon**, where you can pick a new colour, a brand colour, or search the icon library to swap the glyph.

<figure><img src="/files/Z8yo2xzrjVoNZvl0phBE" alt="The Customize icon popover with an accent colour grid, a Brand colors section, and a Search icons field showing a grid of icon results."><figcaption><p>Customize icon</p></figcaption></figure>

***

#### How to set the display

Click **Display** on the floating toolbar to control how every icon on the card renders.

<figure><img src="/files/gc9B87REzkoYW97WPvbg" alt="The Display popover with six settings: Direction (down arrow selected, right arrow option), Size (S, M selected, L), Spacing (Compact selected, Equal), Label align (Middle selected, Top), Show labels (checked), and Interactive (checked)."><figcaption><p>Display</p></figcaption></figure>

* **Direction** - lay the icons out in a column (down) or a row (right). Only a row wraps to fit the card's width. See [How the layout responds to card width](#how-the-layout-responds-to-card-width).
* **Size** - S, M, or L. Changes the icon's size, not how many fit per row.
* **Spacing** - **Compact** packs icons close together; **Equal** spreads them evenly across the full width of the card.
* **Label align** - in the down direction, **Middle** centres each label against its icon and **Top** aligns it with the icon's top edge.
* **Show labels** - turn labels off to show icons alone, which also lets more fit in a row.
* **Interactive** - when on, anyone with edit access can click an icon on the map to toggle it on or off, and the on/off state is shared with everyone viewing the map. Turn it off to keep the icons fixed.

***

#### How the layout responds to card width

In the row direction, icons wrap onto additional rows as the card gets narrower, and unwrap back onto one row as it gets wider. The card's height adjusts to fit however many rows the icons need.

<figure><img src="/files/UasedOsozkQ7Bj949Bk8" alt="A row-direction icon card spanning two columns, wide enough that all six icons sit in a single row."><figcaption><p>Wide enough for one row</p></figcaption></figure>

<figure><img src="/files/2sX3Ts94xRFAphoasIr0" alt="The same card narrowed to one column. The six icons have wrapped into two rows of three."><figcaption><p>Narrower: the same icons wrap onto a second row</p></figcaption></figure>

Turning off **Show labels** shortens each icon's footprint, so a narrow card can fit more icons per row before wrapping.

<figure><img src="/files/CRKIuJhBfUAxpKBfCW2z" alt="The same narrow card with Show labels off. All six icons now fit in a single row of icons alone, with no labels underneath."><figcaption><p>Labels off: the same narrow card fits every icon on one row</p></figcaption></figure>

The column direction doesn't wrap. Its icons stay in a single left-aligned column regardless of card width, so resizing the card only changes how much empty space sits beside them.

***

#### What icon cards share with other cards

The toolbar's shared tail is the same as any other card: **Card header**, the **fill** control for colour and background, **Show card details**, delete, and the three-dot overflow menu. **Display** and **Icons** are specific to icon cards and sit ahead of this shared tail.

<figure><img src="/files/QQJa4ex16KqAaovhkmZe" alt="The floating toolbar above a selected icon card, showing Display and Icons buttons followed by card header, fill, show card details, delete, and a three-dot overflow menu."><figcaption><p>The toolbar on a selected icon card</p></figcaption></figure>

The card details panel holds only the universal **Personas**, **Card tags**, and **Comments** sections; icon configuration lives in the toolbar, not here.

<figure><img src="/files/dhKsTUR43WMpcolgoiWY" alt="The icon card details panel showing only the universal Personas, Card tags, and Comments (0) sections."><figcaption><p>The details panel holds the universal sections only</p></figcaption></figure>

For the toolbar tail, the colour and background picker, the card header, spanning, and multi-select, see [How to add and edit cards](/journey-maps/cards/how-to-add-and-edit-cards.md).

***

#### Related topics

<table data-column-title-hidden data-view="cards"><thead><tr><th>Title</th><th>Description</th><th data-hidden data-card-target data-type="content-ref">Target</th></tr></thead><tbody><tr><td><strong>How to use icon templates</strong></td><td>Build and edit the icon templates that the Choose a template dialog offers, at the account level.</td><td><a href="/pages/slsfRG28ukTuwANdbWJw">/pages/slsfRG28ukTuwANdbWJw</a></td></tr><tr><td><strong>How to add and edit cards</strong></td><td>Parent how-to for shared card mechanics: toolbar, details panel, colours, and headers.</td><td><a href="/pages/DI00pTOdaJmOwltHKgIa">/pages/DI00pTOdaJmOwltHKgIa</a></td></tr><tr><td><strong>How to add and manage lanes</strong></td><td>Add a lane to hold your icon cards, or any other lane type.</td><td><a href="/pages/cEW7pumNPGKdJ65EEAz7">/pages/cEW7pumNPGKdJ65EEAz7</a></td></tr><tr><td><strong>How to bulk edit cards</strong></td><td>Select multiple cards and apply tags, personas, or colours in one go.</td><td><a href="/pages/D239Y2x0Gzcz0VuWHA1p">/pages/D239Y2x0Gzcz0VuWHA1p</a></td></tr><tr><td><strong>How to comment on a card</strong></td><td>Add comments and @mention teammates on any card from its details panel.</td><td><a href="/pages/Kk7GjJu76NovaA8LF2EL">/pages/Kk7GjJu76NovaA8LF2EL</a></td></tr></tbody></table>


---

# 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://helpdesk.smaply.app/journey-maps/cards/how-to-use-icon-cards.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.