# Icon

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

## Overview

A customizable icon block component that renders a single icon with configurable styling options. Supports various icon choices from a predefined set, with controls for size, color, alignment, and responsive visibility.

## Common use cases

* Display visual icons to enhance content meaning
* Create icon-based navigation or call-to-action elements
* Use icons with color schemes to match your brand
* Add decorative or functional icons throughout your sections

## Block settings

### General

| Setting                | Description                 | Options                   |
| ---------------------- | --------------------------- | ------------------------- |
| Show advanced settings | Reveals visibility settings | Checkbox (default: false) |

### Content

| Setting | Description                | Options                      |
| ------- | -------------------------- | ---------------------------- |
| Icon    | Select the icon to display | Icon picker with 60+ options |

### Spacing

| Setting                   | Description                                     | Options                   |
| ------------------------- | ----------------------------------------------- | ------------------------- |
| Enable horizontal padding | Adds horizontal padding around the icon         | Checkbox (default: false) |
| Enable top padding        | Adds top padding around the icon                | Checkbox (default: false) |
| Enable bottom padding     | Adds bottom padding around the icon             | Checkbox (default: false) |
| Enable internal padding   | Adds internal padding inside the icon container | Checkbox (default: false) |

### Color

| Setting      | Description                          | Options                                                                                                                                                                                                                                                      |
| ------------ | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Color scheme | Controls the background color scheme | <p>• Body<br>• Neutral<br>• Accent 1<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Primary<br>• Secondary<br>• Tertiary<br>• Blur<br>• Transparent (default)</p>                                                                   |
| Text color   | Controls the icon color              | <p>• Default (default)<br>• Alternative<br>• Primary background<br>• Primary foreground<br>• Secondary background<br>• Secondary foreground<br>• Tertiary background<br>• Tertiary foreground<br>• Neutral background<br>• Neutral foreground<br>• Shade</p> |

### Style

| Setting    | Description                    | Options                                                                       |
| ---------- | ------------------------------ | ----------------------------------------------------------------------------- |
| Icon style | Controls the icon visual style | <p>• Default (default)<br>• Solid<br>• Outline</p>                            |
| Icon size  | Controls the size of the icon  | 10 - 100 (default: 24)                                                        |
| Radius     | Controls the border radius     | <p>• None<br>• Default<br>• Sm<br>• Md<br>• Lg<br>• Xl<br>• 2xl<br>• Full</p> |

### Layout

| Setting              | Description                   | Options                                        |
| -------------------- | ----------------------------- | ---------------------------------------------- |
| Horizontal alignment | Controls horizontal alignment | <p>• Left (default)<br>• Center<br>• Right</p> |

### Display

| Setting    | Description                        | Options                                                                                                                            |
| ---------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Visibility | Controls when the block is visible | <p>• All (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p> |


---

# Agent Instructions: 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:

```
GET https://help.brickspacelab.com/slab/content/blocks/basics/icon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.