# Images

Wisej.NET controls can use several kinds of icons and images:

* Image file
* Image from an ImageList component
* Image object (System.Drawing.Image)
* Image from the theme or a them mixin
* Image in embedded resources in an assembly

## Image Files

You can use any, relative or full, URL as the source of the image. The properties that can accept a URL typically end with "*Source*": **ImageSource** is the most common property.

## ImageList

Multiple controls in Wisej.NET can utilize the ImageList component. The ImageList component allows you to manage a collection of Image objects by index or key, instead of having an image assigned directly.

{% hint style="info" %}
The biggest advantages of using the *"ImageList"* component are that: it can be shared among multiple controls, and you can change an image without changing the controls that reference, effectively creating a level of indirection.
{% endhint %}

{% hint style="warning" %}
Some controls may have several image properties, all used for the same image. For example, the Button control has "Image", "ImageSource", "ImageIndex", and "ImageKey". They all refer to the same image and when setting one of the properties, the others will reset automatically.
{% endhint %}

Image properties that end with *Key* or *Index* refer to an image in an ImageList. The ImageList may be assigned to the control itself or to its container.

## Image Object

Image properties that don't and with *Index*, *Key* or *Source* and are of type *System.Drawing.Image*, can be assigned with any image object. Wisej.NET will return the image as a png back to the browser.

## Theme Images

Each theme in Wisej.NET comes with a set of default theme images that are used for controls.

![Wisej.NET Theme Images](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-9e37dc75776603ad01156e2303a84fb642dc2576%2Fimage.png?alt=media)

You can use any image from the theme, including images in theme mixins, simply by name. Assign the name to an *ImageSource* property and Wisej.NET will load the image from the client cache to the browser element.

{% hint style="info" %}
Theme images are all preloaded on the client at once.
{% endhint %}

## Icon Packs

Wisej.NET supports Icon Packs at runtime and design time. An **Icon Pack** is an assembly that embeds a collection of icons. You can deploy single assembly instead of multiple icon files.

The Design-Time Image Selector automatically discovers the Icon Pack Assemblies referenced in the project and adds them to the folder list, right below the Project Root Folder. When you select the Icon Pack, Wisej.NET lists and previews all the embedded icons in the assembly and lets you choose the icon to use, as if it was a single file.

You can build your own Icon Packs and/or download the ones that we provide.

{% embed url="<https://docs.wisej.com/extensions/icon-packs/overview>" %}

## SVG Colors

All Wisej.NET themes use SVG monochrome icons. Their color is set either in the theme or to match the container's text color. It's the same behavior of icon fonts.

In case you need to change the color of a specific SVG icon, without having to change the color of the text of the container, you can add the color to the **ImageSource** name or URL (for embedded icons and icon packs) by adding: **?color=\[color]**.\\

{% tabs %}
{% tab title="C#" %}

```csharp
this.IconSource = "icon-print?color=red";
this.IconSource = "icon-print?color=#ff0000";
this.IconSource = "icon-print?color=rgb(255,0,0)";
this.IconSource = "icon-print?color=activeText"; // you can use theme colors.
this.IconSource = "resource.wx/birthday-cake.svg?color=#ff0000";
this.IconSource = "resource.wx/birthday-cake.svg?color=rgb(255,0,0)";
this.IconSource = "resource.wx/birthday-cake.svg?color=activeText";
this.IconSource = "resource.wx/birthday-cake.svg?color=rgba(255,0,0.5)";
```

{% endtab %}
{% endtabs %}

{% hint style="danger" %}
If your SVG color is not able to be changed, it could be due to a fill or stroke value inside of the SVG. Try removing it with a Text Editor.
{% endhint %}

## Icon Size

The size of the icons is usually set in the themes. You can change it by using an [ImageList ](https://docs.wisej.com/docs/controls/content/imagelist)component and assigning it to the control that has the image you want to resize. The ImageList component will resize the image even if it's not in its image list.

{% hint style="info" %}
Labels use the original size of the image. To set the size of the images used in labels, either use a png or a gif image already sized to the desired dimensions, or use the [ImageList ](https://docs.wisej.com/docs/controls/content/imagelist)component.
{% endhint %}