---
title: glyphImage
framework: mapkitjs
role: symbol
role_heading: Instance Property
path: mapkitjs/markerannotation/glyphimage
---

# glyphImage

The image to display in the marker balloon.

## Declaration

```data
get glyphImage():
    | ImageSource
    | ImageHashObject
    | ImageDelegate
    | Promise<ImageSource>
    | null;
set glyphImage(
    value:
        | ImageSource
        | ImageHashObject
        | ImageDelegate
        | Promise<ImageSource>
        | null,
);
```

## Discussion

Discussion Glyph image values can be object literals that contain absolute or relative URLs to standard, @2x, and @3x assets, an ImageDelegate, an ImageSource such as an HTMLCanvasElement or ImageBitmap, or a Promise that resolves to an ImageSource. See ImageSource for cross-origin requirements. The framework requires at least one image at 20 x 20 pixels. Create glyph images as template images — a monochrome image with opacity, if needed — so that MapKit JS can apply the glyphColor to tint the image. If you set glyphImage to null or undefined, MapKit JS uses the default glyph image of a pin. If you specify both a glyphImage and glyphText, MapKit JS ignores the glyph image, and the framework displays glyph text.

## See Also

### Setting the glyph image and text

- [glyphText](mapkitjs/markerannotation/glyphtext.md)
- [selectedGlyphImage](mapkitjs/markerannotation/selectedglyphimage.md)