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

#### Icon Symbolizer

vector 86 style 27 icon 9 marker 6 popup 3

#####

Example using an icon to symbolize a point.

Example using an icon to symbolize a point.

##### main.js

    import Feature from 'ol/Feature.js';
    import Map from 'ol/Map.js';
    import Overlay from 'ol/Overlay.js';
    import View from 'ol/View.js';
    import Point from 'ol/geom/Point.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 map = new Map({
      layers: [rasterLayer, vectorLayer],
      target: document.getElementById('map'),
      view: new View({
        center: [0, 0],
        zoom: 3,
      }),
    });

    const element = document.getElementById('popup');

    const popup = new Overlay({
      element: element,
      positioning: 'bottom-center',
      stopEvent: false,
    });
    map.addOverlay(popup);

    let popover;
    function disposePopover() {
      if (popover) {
        popover.dispose();
        popover = undefined;
      }
    }
    // display popup on click
    map.on('click', function (evt) {
      const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
        return feature;
      });
      disposePopover();
      if (!feature) {
        return;
      }
      popup.setPosition(evt.coordinate);
      popover = new bootstrap.Popover(element, {
        placement: 'top',
        html: true,
        content: feature.get('name'),
      });
      popover.show();
    });

    // change mouse cursor when over marker
    map.on('pointermove', function (e) {
      const hit = map.hasFeatureAtPixel(e.pixel);
      map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });
    // Close the popup when the map is moved
    map.on('movestart', disposePopover);

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Icon Symbolizer</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"><div id="popup"></div></div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

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