---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/icon_customImage.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/icon_customImage.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# Setting a custom placemark image
Open in CodeSandbox
The API provides the ability to set custom images for placemarks.
To set a desired image, specify the following options for the placemark:
- iconLayout: "default#image";
- iconImageHref: {URL of the graphic file}.
To set the image with the content specify the following placemark options:
- iconLayout: "default#imageWithContent";
- iconImageHref: {URL of the graphic file}.
And also specify the content of the geo object icon:
You can also set the options iconImageSize (width and height of the image in pixels), iconImageOffset (the offset of the icon's upper-left corner relative to the anchor point), iconImageClipRect (coordinates of the displayed area of the source image, in pixels), iconContentOffset (the offset of the text relative to the placemark's anchor point) and iconContentLayout (content layout).
{% list tabs %}
- index.html
```html
Examples. Setting a custom placemark image
```
- icon_customImage.js
```js
ymaps.ready(function () {
var myMap = new ymaps.Map(
"map",
{
center: [55.751574, 37.573856],
zoom: 9,
},
{
searchControlProvider: "yandex#search",
}
),
// Creating a content layout.
MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
'$[properties.iconContent]
'
),
myPlacemark = new ymaps.Placemark(
myMap.getCenter(),
{
hintContent: "A custom placemark icon",
balloonContent: "This is a pretty placemark",
},
{
/**
* Options.
* You must specify this type of layout.
*/
iconLayout: "default#image",
// Custom image for the placemark icon.
iconImageHref: "icons/pin.svg",
// The size of the placemark.
iconImageSize: [48, 48],
/**
* The offset of the upper left corner of the icon relative
* to its "tail" (the anchor point).
*/
iconImageOffset: [-5, -44],
}
),
myPlacemarkWithContent = new ymaps.Placemark(
[55.661574, 37.573856],
{
hintContent: "A custom placemark icon with contents",
balloonContent: "This one — for Christmas",
iconContent: "12",
},
{
/**
* Options.
* You must specify this type of layout.
*/
iconLayout: "default#imageWithContent",
// Custom image for the placemark icon.
iconImageHref: "icons/christmass-head.svg",
// The size of the placemark.
iconImageSize: [48, 48],
/**
* The offset of the upper left corner of the icon relative
* to its "tail" (the anchor point).
*/
iconImageOffset: [-24, -24],
// Offset of the layer with content relative to the layer with the image.
iconContentOffset: [15, 15],
// Content layout.
iconContentLayout: MyIconContentLayout,
}
);
myMap.geoObjects.add(myPlacemark).add(myPlacemarkWithContent);
});
```
{% endlist %}