# Working with Custom Assets

In this document, we discuss how to incorporate your custom Assets (including GIFs, images, and fonts) into your Airkit apps.

## Working with Images and GIFs

There are two ways to incorporate images and GIFs into your apps:

* Refer to the GIF/image URL.
* Upload the media file into your application.

### Refer to the GIF/image URL

Most fields that require images as input allow the image to be defined by an **Expression**. The **Expression** should evaluate to a `string` that defines a GIF or image URL. For instance, while Inspecting an [Image](../../web-controls/image-web-control) Web Control in the [Web Flows Builder](../../studio/studio/builder-bar/web-flows-builder), the field under **Properties > General > Image src** expands to show an **Expression** Tab. The string`"https://placekitten.com/500/500"` defines an image URL that points to a picture of a cat:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-429cd3530e70ea263477a8095b5a0b4cc6909caf%2Fworking-with-custom-assets-v184-0.png?alt=media)

### Upload the image into your application

Airkit accepts the following image types:&#x20;

* .gif
* .jpeg
* .jpg
* .png
* .svg

To upload an image into an application, toggle over to [Media Library](../../building-apps/assets/working-with-files-and-media) and upload the desired image from your computer. This will add the image to the Media Library as an Asset.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-e5b97b0d2a1d1f0afaabbc611d4661c911cb5ae6%2Fworking-with-custom-assets-v184-1.png?alt=media)

Once an image is stored in the Media Library, it will be available for selection as an Asset throughout the application. For instance, in the [Web Flows Builder](../../studio/studio/builder-bar/web-flows-builder), uploaded image Assets can be displayed in the [Image](../../web-controls/image-web-control) Web Control, when they are selected in the Inspector, under **Properties > General > Image src > Asset**.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-309b38e5e3683c9f44638bdee75da611fc307063%2Fworking-with-custom-assets-v184-2.png?alt=media)

The Image Web Control also provides the option to upload image files directly from the Web Flows Builder, but when using an image Asset to define the background of another Web Control, no such option exists, and image Assets will need to be uploaded via the Media Library in order to be used throughout the application.

## Working with Custom Fonts

Out-of-the-box, Airkit comes configured with the fonts available through [Google Fonts](https://fonts.google.com/). It is also possible to upload custom fonts.

Airkit accepts the following font types:&#x20;

* .otf
* .ttf
* .woff
* .woff2

To add a custom font to an application, toggle over to [Media Library](../../building-apps/assets/working-with-files-and-media) and upload the desired font. This will add the font to the Media Library as an Asset.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-e157ccf61a417191e39b9af09f72ac5c1a9a4bd6%2Fworking-with-custom-assets-v184-3.png?alt=media)

Once a font is stored in the Media Library, it will be available for selection as a font throughout the application. When [styling](https://github.com/airkit/airkit-docs/blob/master/docs/v18-4/common-style-properties-of-web-controls.md) a UI element with an associated text property, you'll find the custom font available for selection under the **Custom** tab of the dropdown menu tied to the **Font** field:

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-ba4478358c79548a9392c5e02c696f70c81fa784%2Fworking-with-custom-assets-v184-4.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

Custom fonts can also be applied to text throughout an application by using the custom font to define a [Theme](themes-and-control-variants).
