JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script>
<div id="map"></div>

CSS

#map {
    width: 400px;
    height: 400px;
}

JavaScript

var source = new ol.source.Vector();

var map = new ol.Map({
    target: 'map',
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    }),
    new ol.layer.Vector({
        source: source
    })],
    view: new ol.View({
        projection: 'EPSG:3857',
        center: [0, 0],
        zoom: 4
    })
});

var draw = new ol.interaction.Draw({
    type: 'Polygon',
    source: source,
    style: new ol.style.Style({
        image: 
        //Start of the Icon style
        new ol.style.Icon({
            src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Crosshairs_Red.svg/1024px-Crosshairs_Red.svg.png',
            size: [10, 10],
            opacity: 1
        })
        //Start of the circle style
        /*new ol.style.Circle({
            fill: new ol.style.Fill({
                color: 'green'
            }),
            stroke: new ol.style.Stroke({
                width: 3,
                color: 'red'
            }),
            radius: 8
                    })
                    //Start of the star style
                    new ol.style.RegularShape({
            fill: new ol.style.Fill({
                color: 'red'  }),
            points: 4,
            radius1: 15,
            radius2: 1
                    }),
                    stroke: new ol.style.Stroke({
            color: 'blue',
            width: 5
                    }),
                    fill: new ol.style.Fill({
            color: 'green'
                   */ })
            }
});
map.addInteraction(draw);