> For the complete documentation index, see [llms.txt](https://doc.sysdevmobile.com/kalipso/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.sysdevmobile.com/kalipso/6.0/documentation/controls/type/kalipso-media-center.md).

# Kalipso Media Center

Kalipso Media Center is a built-in icon manager that allows you to browse, customize, and use icons in your project. It comes with more than 4000 icons organized in different collections.

## Icon Browser

<figure><img src="https://1102213384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM6Wz3tBjSWbCweZ8NltT%2Fuploads%2FOBiLun6UTgrpScDNn6KF%2Fimage.png?alt=media&amp;token=f165dcf9-fa71-4fe9-9a56-6dedf2e74401" alt="Kalipso Media Center main window"><figcaption><p>Kalipso Media Center - Icon Browser</p></figcaption></figure>

The main window displays:

### Designer Collections

The left panel shows available icon collections:

* **Colored** - Multi-color icons
* **Fluent Filled** - Solid filled icons
* **Fluent Regular** - Outline icons

Each collection shows the number of available icons in parentheses.

### Icon Grid

The center area displays icons from the selected collection. Each icon shows its name below. Use the **Search** bar at the top to find icons by name.

### Options

* **Light** - Adjust the brightness of the icon preview
* **Export icon size** - Set the size of the exported icon (e.g., 144px)
* **My Collections** - Access your saved icon collections

### My Collections

<figure><img src="https://1102213384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM6Wz3tBjSWbCweZ8NltT%2Fuploads%2Ff0EnBg7DxoKdUbjpBd0D%2Fimage.png?alt=media&amp;token=1c399000-b932-4e61-ac13-e6d2f38905bd" alt="My Collections menu"><figcaption><p>My Collections options</p></figcaption></figure>

* **Download Icons** - Get new sets of curated icons for Kalipso Designer
* **Rebuild icons cache** - Restore corrupted icon sets by updating the cache

Click **SELECT** to choose an icon and open the Icon Editor, or **CANCEL** to close.

## Icon Editor

When you select an icon, the Icon Editor opens with four tabs: **Icon**, **Overlay**, **Text**, and **Tags**.

### Icon Tab

<figure><img src="https://1102213384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM6Wz3tBjSWbCweZ8NltT%2Fuploads%2Fdp8OUjm6Dd5EupMxqpg0%2Fimage.png?alt=media&amp;token=d58dc1bd-f774-44c4-846a-c5df6582b07c" alt="Icon Editor - Icon tab"><figcaption><p>Icon Tab - Customize colors and effects</p></figcaption></figure>

Customize the main icon appearance:

#### Size and Color

* **Icon Size** - Adjust the icon size using the slider
* **Selective colors** - Click on any color in the icon to change it individually

#### Background

* **Shape** - Choose a background shape (square, rounded square, circle, hexagon)
* **Color** - Set the background fill color
* **Border** - Set the border color
* **Border Size** - Adjust the border thickness
* **Border Opacity** - Control the border transparency

#### Special Effects

* **Rotation** - Rotate the icon by degrees
* **Flip** - Flip the icon horizontally or vertically
* **Shadow** - Add a drop shadow with customizable:
  * Color
  * Blur Radius
  * Direction (angle)
  * Distance

### Overlay Tab

Add another icon on top of the main icon (e.g., a "+" sign to indicate "add").

<figure><img src="https://1102213384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM6Wz3tBjSWbCweZ8NltT%2Fuploads%2Fjv3G5kmAPnAaj2Z2Nw3Q%2Fimage.png?alt=media&amp;token=e2d40ae4-6933-48ba-b2f4-fd19a63fc84f" alt="Icon Editor - Overlay tab"><figcaption><p>Overlay Tab - Add icons on top</p></figcaption></figure>

* **ON/OFF** - Toggle the overlay feature
* **Select And Search** - Browse collections or search for overlay icons
* **Size and Color** - Adjust the overlay icon size and colors
* **Background** - Add a background shape to the overlay
* **Effects** - Apply shadow effects to the overlay

### Text Tab

Add text to your icon.

<figure><img src="https://1102213384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM6Wz3tBjSWbCweZ8NltT%2Fuploads%2Fqn3HwFrGEslwh3xYME1M%2Fimage.png?alt=media&amp;token=4cf979d1-6b3d-4089-91ce-1b0f435f02a9" alt="Icon Editor - Text tab"><figcaption><p>Text Tab - Add text overlay</p></figcaption></figure>

* **ON/OFF** - Toggle the text overlay
* **Font Family, Size and Color** - Choose font, size, and text color
* **Text Styling** - Bold, Italic, Underline, Strikethrough
* **Alignment** - Left, Center, Right
* **Text** - Enter the text to display
* **Background** - Add a background shape behind the text
* **Special Effects** - Rotation, Flip, and Shadow options

### Tags Tab

Add search tags to help find icons more easily.

<figure><img src="https://1102213384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM6Wz3tBjSWbCweZ8NltT%2Fuploads%2Fn2xag07raSBKbhzSl0d2%2Fimage.png?alt=media&amp;token=6bdabee6-772f-4aa6-b609-90c724a2ad5d" alt="Icon Editor - Tags tab"><figcaption><p>Tags Tab - Manage search tags</p></figcaption></figure>

* **Get tags from the internet** - Enter a term and click **Search in internet** to find related tags
* **Add a new tag** - Manually add custom tags
* **Found tags** - View all tags associated with the icon
* **Save results** - Save the tag changes
* **Clear list** - Remove all tags

## Saving Your Icon

* **Icon Name** - Change the name of your customized icon in the field at the top right
* **Save** - Save the icon to your project
* **Close** - Close without saving