Round Marker with image

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map" ></div>

CSS

#map {
    height: 400px;
}

  .image-icon img {
    height: 52px !important;
    width: 52px !important;
    border-radius: 50%;
    border: solid;
    border-color: green;
}

JavaScript

var lat = 46.566414;
var lng =  2.4609375;
var zoom =  5;

var map = new L.Map('map');

var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data &copy; OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 8, attribution: osmAttrib});
map.addLayer(osm);

map.setView(new L.LatLng(lat, lng), zoom);

var img = "<img src='https://www.seriouseats.com/images/2014/06/20140623-cheese101-hard-cheese-emmenthaler-vicky-wasik-1.jpg' />";
var marker = new L.Marker([48.862312, 2.332317], {
    icon: L.divIcon({
        html: img,
        // Specify a class name we can refer to in CSS.
        className: 'image-icon',
        // Set a markers width and height.
        iconSize: [52, 52]
        }) 
});

marker.addTo(map);