# Icons

## Overview

The addition of the icon content block in the builder has made it more convenient to use text and images together, offering a cohesive way to enhance your designs. Icons serve as small, expressive elements that can accentuate your content, making the layout more interactive and visually appealing. Icons can replace or accompany traditional bullet points for a more visually compelling list.<br>

<figure><img src="https://lh7-eu.googleusercontent.com/frFFQ9n73CW6TKpYJbiwu3ORkgRzcIzBcrxvSjMRj-l61U42SORuciW6g99ilaLr__qJ6NIVYi3Z55sHu5J_902_T4CcSQauyNiEF_rpQAtYo0WxXoEYV4Uw_H2tEg2bDGlOq4fNVwpydNUZnn1RmZg" alt=""><figcaption></figcaption></figure>

## How to Use Icons

To start incorporating icons into your project, follow these steps:

1. **Drag an Icon Block:** Drag an icon content block into the row where you'd like the icon to appear. A placeholder icon will initially fill the block.
2. **Access Icon Options:** Click on the placeholder to open the icon customization options in the sidebar.
3. **Add or Replace Icon:** Click 'Add new icon' to insert a pre-loaded icon into the builder stage. Alternatively, you can change the existing icon by clicking the 'Change image' button, which will open your file manager.
4. **Image Editing:** Should you need to modify your icon, the 'Apply effects & more' option allows access to an image editor.
5. **Additional Settings:** Under 'More options', you'll find settings that are unique to the icon content block, like icon text and positioning options.

## Customizing Icon Properties

<figure><img src="https://lh7-eu.googleusercontent.com/hsd2mKfaJRobufxdXkHqH32sHRpgQLbAgZRt7YjU9hivfp4wkSSECF1thL1zmFCA6yejRowTzr7zzJI3bZNRvZQA28wI5sk0J_UjN2vG4Ufg8SoAUvKitbBQhtPrCeDxm6JBYVgB8-qOH4yKU79LpzM" alt=""><figcaption></figcaption></figure>

You can customize the following icon properties:

* **Icon Text:** Entering text into the 'Icon text' field will add a text label near the icon. A new field in the sidebar will appear, giving you the option to adjust this text.
* **Text Position:** You can specify where the text should appear relative to the icon—above, below, or to the sides—using the 'text position' dropdown menu.
* **Reorder Icons:** If you've included multiple icons, you can easily rearrange their order by clicking and dragging them.

<figure><img src="https://lh7-eu.googleusercontent.com/_JuDVOKEtdtEaYVdGR6fhQDL76BqNjtw5noEDewb83u1mNqpXkj1F0OO0m9ZbtHC4l8M_sCDe-PFNOZu0TBRAGt0N10aWPXyShZf2XJl5sGXb4IuVKrPkd91uRNlIjo9Med12ja9flS4bfYbPklHLAo" alt=""><figcaption></figcaption></figure>

* **Icon Size and Spacing:** Two specific settings allow you to resize the icons and set the space between them.
* **Additional Settings:** These are standard settings you'll find in other content blocks, like padding, border, alignment, etc., and apply to the entire content block.


---

# 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://docs.beefree.io/end-user-guide/content-blocks/icons.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.