# Icon Button

## Motion Functions

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Identification Function</td><td><a href="/files/Sje9zJAedM2McL5o73fg">/files/Sje9zJAedM2McL5o73fg</a></td></tr><tr><td>Aesthetic Function</td><td><a href="/files/Vf6ES6yWeOpBr6RP7Vtl">/files/Vf6ES6yWeOpBr6RP7Vtl</a></td></tr><tr><td>Emotive Function</td><td><a href="/files/b3o7ZgKGBBmM5RZ2E9OB">/files/b3o7ZgKGBBmM5RZ2E9OB</a></td></tr></tbody></table>

Icon buttons are often used to represent a specific action or function and are designed to provide a visual cue to the user about its purpose. The primary function of an icon button is Identification. Animations and motion within an icon button can give the user an idea of the button's task.

The icon buttons can convey a sense of delight with their aesthetic design choice and emotional appeal. Motion Principles can be used to arrive at these functions of the animation.

## Examples

<figure><img src="/files/FMFyurVgzVUvXi8YJLmh" alt=""><figcaption><p>Front to Back Camera Switch Microinteraction by Oleksandr Pronskyi</p></figcaption></figure>

The icon button here leverages the principle of transformation and dimensionality to change shape from a person to a camera. Along with the direction arrows, this icon helps the user identify what state the camera is in and shows a change of state by moving the arrow and transforming the shape from the front of the screen to the back of the phone. The action mimics rotating a phone, and the added dimensionality to the microinteractions helps ground it in reality.&#x20;

<div><figure><img src="/files/te5ksvAV8j8HM2Gmgv2o" alt=""><figcaption><p>Bookmark by Aaron Iker</p></figcaption></figure> <figure><img src="/files/VEqPf1zYdfopDjQG54IV" alt=""><figcaption><p>Add to Bookmark Interaction by Paarth Desai</p></figcaption></figure></div>

The bookmarks show dimensionality and a state change when pressed, helping the user identify the action performed and a way to undo the action. The stylistic interpretation of the examples are different, but convey the same information.&#x20;

<figure><img src="/files/DCDX4agXXq09QNh7tMmb" alt=""><figcaption><p>Custom Like Animation by Margarita Ivanchikova</p></figcaption></figure>

The like animation microinteraction leans heavily on aesthetics to convey the emotion of having "liked" something. It leverages the principles of offset and delay along with an accelerated easing curve to pack emotion into a tiny, liked-sized package.&#x20;

<figure><img src="/files/NkfhZxik6YWKEwi1p2Ta" alt=""><figcaption><p>Search &#x26; Close Microinteraction by Paarth Desai</p></figcaption></figure>

This search microinteraction uses a morphing interaction to transform from a magnifying glass to an x-icon to communicate to the user the change in state. The handle of the magnifying glass conveys the idea that the glass has transformed into a button and the interaction state has changed.&#x20;


---

# 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://abhishekshankar.gitbook.io/uxm/the-system/action-components/icon-button.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.