This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Icon modification

vector 86 modify 11 icon 9 marker 6

#####

Example using a Modify interaction to edit an icon.

The icon on this map can be dragged to modify its location.

The Modify interaction can be configured with a `hitDetection` option. With this option, the modification candidate will not be determined by the `pixelTolerance`, but match the visual appearance of the geometry.

##### main.js

    import Feature from 'ol/Feature.js';
    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import Point from 'ol/geom/Point.js';
    import Modify from 'ol/interaction/Modify.js';
    import TileLayer from 'ol/layer/Tile.js';
    import VectorLayer from 'ol/layer/Vector.js';
    import OGCMapTile from 'ol/source/OGCMapTile.js';
    import VectorSource from 'ol/source/Vector.js';
    import Icon from 'ol/style/Icon.js';
    import Style from 'ol/style/Style.js';

    const iconFeature = new Feature({
      geometry: new Point([0, 0]),
      name: 'Null Island',
      population: 4000,
      rainfall: 500,
    });

    const iconStyle = new Style({
      image: new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'data/icon.png',
      }),
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new VectorSource({
      features: [iconFeature],
    });

    const vectorLayer = new VectorLayer({
      source: vectorSource,
    });

    const rasterLayer = new TileLayer({
      source: new OGCMapTile({
        url: 'https://maps.gnosis.earth/ogcapi/collections/NaturalEarth:raster:HYP_HR_SR_OB_DR/map/tiles/WebMercatorQuad',
        crossOrigin: '',
      }),
    });

    const target = document.getElementById('map');
    const map = new Map({
      layers: [rasterLayer, vectorLayer],
      target: target,
      view: new View({
        center: [0, 0],
        zoom: 3,
      }),
    });

    const modify = new Modify({
      hitDetection: vectorLayer,
      source: vectorSource,
    });
    modify.on(['modifystart', 'modifyend'], function (evt) {
      target.style.cursor = evt.type === 'modifystart' ? 'grabbing' : 'pointer';
    });
    const overlaySource = modify.getOverlay().getSource();
    overlaySource.on(['addfeature', 'removefeature'], function (evt) {
      target.style.cursor = evt.type === 'addfeature' ? 'pointer' : '';
    });

    map.addInteraction(modify);

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Icon modification</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "modify-icon",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }