> Markdown version of [Images & Icons](https://vaadin.com/docs/v24/flow/application/resources). Section index: [llms.txt](https://vaadin.com/docs/v24/flow/llms.txt)

# <a id="application.resources"></a>Images & Icons

Images and icons are the basic custom visual elements to add visual content, guides, and style. You can display images using the `Image` component. Many web components allow you to display an icon along with a title or inside the component.

## <a id="the-image-component"></a>The Image Component

The `Image` component allows you to embed images. It’s a wrapper around the HTML `<img>` element. You can display either static images or images generated on the fly.

### <a id="static-resources"></a>Static Resources

A servlet container can serve images as static resources. This is more efficient than streaming them through the application, as described later. You can also serve static resources from a frontend server.

`ImageBasic.java`

```java
Image image = new Image("images/myimage.png", "My Alt Image");
add(image);
```

The second parameter to the constructor is alternative text, which is displayed if the image can’t be displayed for some reason. It’s also used in assistive technologies.

The location of static image resources in the project depends on the deployment method:

- Web Archive (WAR) packaging

  Under `/src/main/webapp`, such as `/src/main/webapp/images/myimage.png`.

- JAR packaging (Spring Boot applications)

  Under `/src/main/resources/META-INF/resources`, such as `/src/main/resources/META-INF/resources/images/myimage.png`.

The access URL of the image resource depends on how the application is deployed. If the resources are deployed under the application root URL, you could access the example file with `images/myimage.png`, as in the earlier Java example. Embedding can further complicate the access URL.

In addition to the static path you can also dynamically load servlet container resources using the `forServletResource()` of `DownloadHandler`

```java
Image image = new Image(DownloadHandler.forServletResource("/images/myimage.png"), "My Streamed Image");
```

### <a id="class-resources"></a>Class Resources

You can use `DownloadHandler` to load images from the Java class path. In this case, the images need to be below `src/main/resources` in the Java compilation path. The path for `forClassResource()` can be either absolute considering `src/main/resources` as the root path and in that case you need to include the leading `/` or the path can be relative to the class package. For instance, if the class is `com.example.ui.MyData` the image can be below `src/main/resources/com/example/ui`

Sample code when path is absolute

```java
Image image = new Image(DownloadHandler.forClassResource(getClass(),"/images/myimage.png"), "My Streamed Image");
```

Sample code when path is same as the package of the class in parameter

```java
Image image = new Image(DownloadHandler.forClassResource(MyData.class,"myimage.png"), "My Streamed Image");
```

## <a id="icons"></a>Icons

Icons are small graphical symbols intended to represent the various functions of an application, as well as different types of data. Vaadin has [over 600 built-in icons](https://vaadin.com/docs/v24/components/icons.md) for you to use in your applications.

You can use icons in the same way as any other components:

`IconsBasic.java`

```java
Icon icon = new Icon("vaadin", "moon");
add(icon);
```

Most components allow you to place icons beside the title or inside the component, as a prefix, a suffix, or a helper component. The placement options depend on the component.

`IconsInside.java`

```java
TextField field = new TextField("Street Address");
field.setPrefixComponent(new Icon("vaadin", "map-marker"));
field.setSuffixComponent(new Icon("vaadin", "building"));

// Wrap the icon inside a composition
HorizontalLayout helper = new HorizontalLayout();
helper.add(new Icon("vaadin", "info-circle-o"));
helper.add(new NativeLabel("Here be help"));
field.setHelperComponent(helper);

add(field);
```

You can use either a helper component (such as an icon) or text, but not both. If you need both, you can put them inside a compositing component, such as a `HorizontalLayout`, as in the example above.

`E4B53936-053E-4611-B7F4-05202CA46594`