> For the complete documentation index, see [llms.txt](https://docs.adapptio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.adapptio.com/working-with-adapptio/how-to/visual/styling-icon-button.md).

# Styling Icon Button

### The Goal

Design a rounded *Button* suitable for editing records.

![Designed Rounded Button](/files/pLgCbGzORuIYWvDEkwvI)

### The Description

Any type of *Buttons* used for editing records must be slightly visible and contain an “*easy-to-read*” small icons.

### The Knowledge You Will Get

1. How to design icons.

### The Project Structure

{% tabs %}
{% tab title="View\[MainView]" %}

* [ ] MainView
  * [ ] Container\[`container1`]
    * [ ] Button\[`button1`]
      {% endtab %}
      {% endtabs %}

### 1. Prepare a Canvas and Design a Button

1. Place in a **Container**, set up its *Item Flex* -> `Stretch`; *Horizontal Alignment* -> `Center`; *Vertical Alignment* -> `Middle`
2. Put in a new **Button** and configure its settings as follows:
   1. Empty its default *Text* -> *Value* -> ""
   2. *Icon* -> *Name* "`mdi/lead-pencil`"; *Size* -> `Small`
   3. *Style* -> *Button Style* -> `Custom`
      1. *Background* -> `WHITE`; *Foreground* -> `TEXT`; *Border Color* -> `LIGHT_GRAY`; *Border Width* -> `1px`; *Border Radius* -> `18px`

### The Conclusion

As we can see, styling buttons is fast and easy. Try to make your style.

{% hint style="info" %}
Follow up on our *Icon Button* tutorial <https://youtu.be/qeCDpKsg7Xc>
{% endhint %}