mapboxgl-marker

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css">
<div id="map"></div>

CSS

body {
   margin:0;
   padding:0;
}

#map {
   position:absolute;
   top:0;
   bottom:0;
   width:100%;
}

.marker {
    background-image: url('https://secure.webtoolhub.com/static/resources/icons/set101/1dc0e500.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidGdlY2hvIiwiYSI6ImNpczdzZGtmbjA0ZHcyc25wcGV2cXU2cXUifQ._OD-Y3V-VKhOCJY9J7aiIw';

var coordinates = [74.310714, 31.588003]

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: coordinates,
    zoom: 16
});

var el = document.createElement('div');
    el.className = 'marker';
    
// add marker to map
    var m = new mapboxgl.Marker(el, {offset: [0, -50/2]});
    m.setLngLat(coordinates);
    m.addTo(map);
    
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');