> 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/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://1614058754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ5vDGuBZwhJDeu5Rq7Wt%2Fuploads%2Fgit-blob-fee5b4e49cc673bacc0a91b2fe587c21003026fb%2Fkalipso_ms_1.png?alt=media" 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://1614058754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ5vDGuBZwhJDeu5Rq7Wt%2Fuploads%2Fgit-blob-9e9064f69f73898b6c573071a7bb540b4d615ee8%2Fkalipso_ms_6.png?alt=media" 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://1614058754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ5vDGuBZwhJDeu5Rq7Wt%2Fuploads%2Fgit-blob-7b6d4ae57f980c20fe4598d7f1f6e083377ba78c%2Fkalipso_ms_2.png?alt=media" 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://1614058754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ5vDGuBZwhJDeu5Rq7Wt%2Fuploads%2Fgit-blob-8e2e60e0cdab87bc19d430259d8b4865db30da18%2Fkalipso_ms_3.png?alt=media" 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://1614058754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ5vDGuBZwhJDeu5Rq7Wt%2Fuploads%2Fgit-blob-64021958548b29b135d33abe402937db83d24088%2Fkalipso_ms_4.png?alt=media" 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://1614058754-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ5vDGuBZwhJDeu5Rq7Wt%2Fuploads%2Fgit-blob-c49f5fa03d7412d95f7ba7d6b8c0e6df35b3a0a6%2Fkalipso_ms_5.png?alt=media" 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