Custom Status Symbols on Map

Another option is to add your own CSS code to PRTG.

Option 1: Simply replacing the image for green icons (same size as the original)

div.sensg 
{ 
  background-image:url(yourimageurl)!important; 
}

Option 2: Replacing the image for green icons an Maps (with your own size)

.map_icon div.sensg 
{ 
  height:30px !important; 
  display:inline-block; 
  background-image:url(yourimageurl)!important; 
  padding-left:30px!important; 
}

The codes for the other sensor states are:

• div.sensr: Alarm
• div.senso: Alarm Acknowledged
• div.sensb: Blue (Paused)
• div.sensy: Warning
• div.sensp: Unusual
• div.sensx: Unknown

I've made extensive use of the customerstyles.css along with custom map icons to create multiple sets of custom icons.

For example, I've created a status wallboard for my Service Desk that uses larger fonts and custom icons so it can be seen across the room. I've added the following to my customerstyles.css:

** XL Map sizes - used for SD Wallboard
/******************************************************************************************/


}

div.map_icon_xl,div.map_icon_xl div,div.map_icon_xl span,td.map_icon_xl
{
	font-size: 35px !important;
	font-weight: bold !important;
	padding-right: 10px;
	padding-left: 1px;
	margin-right: 30px;
	margin-left: 10px;
	margin-top: 2px;
	margin-bottom: 25px;
}


.map_icon_xl div.sensg,.map_icon_xl div.sensr,.map_icon_xl div.sensb,.map_icon_xl div.sensy,.map_icon_xl div.sensp,.map_icon_xl div.sensx,.map_icon_xl div.senso
{
	background-repeat: no-repeat;
	padding-left: 55px;
	background-position: 0px 0px;
	padding-bottom: 8px;
	padding-right: 10px;
	margin-bottom: 25px;
	margin-left: 10px;
	text-transform: capitalize;

}


.map_icon_xl div.sensg
{
	background-image: url(/icons/led_green_xl.png);
	min-height: 34pt;
	margin-left: 10px;
	margin-right: 10px;
}
.map_icon_xl div.sensy
{
    background-image:url(/icons/led_yellow_xl.png);
   	min-height: 34pt;
	margin-right: 10px;
	margin-left: 10px;
}
.map_icon_xl div.sensr
{
    background-image:url(/icons/led_red_xl.png);
	min-height: 34pt;
	margin-right: 10px;
	margin-left: 10px;
}
.map_icon_xl div.sensb
{
    background-image:url(/icons/led_blue_xl.png);
	min-height: 34pt;
	margin-right: 10px;
	margin-left: 10px;
}
.map_icon_xl div.sensp
{
    background-image:url(/icons/led_orange_xl.png);
	min-height: 34pt;
	margin-right: 10px;
	margin-left: 10px;
}
.map_icon_xl div.sensx
{
    background-image:url(/icons/led_grey_xl.png);
	min-height: 34pt;
	margin-right: 10px;
	margin-left: 10px;
}

.map_icon_xl div.senso
{
    background-image:url(/icons/led_downack_xl.png);
	min-height: 34pt;
	margin-right: 10px;
	margin-left: 10px;
}

div.map_icon div.sensr,div.map_icon div.senso
{
    background-color:#ffffff;
}

I've then created custom map icons to take advantage of these (in the website/mapbojects folder)

<!--Status Icons (for Groups, Devices, or Sensors): With Name, White Background (Large)-->

<div class="map_object map_icon map_icon_large" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="topleftcoordinates" subid="<@subid>" mode="<@editmode>">">
	<#mapobject type="objectgrip" mode="<@editmode>">
	<#mapobject type="htmlbefore" subid="<@subid>">
	<span>
		<#objectproperty name="Name" id="<@objectid>">: 
		<#objectstatus name="downsens" id="<@objectid>">
		<#objectstatus name="downacksens" id="<@objectid>">
		<#objectstatus name="warnsens" id="<@objectid>">
		<#objectstatus name="upsens" id="<@objectid>">
		<#objectstatus name="pausedsens" id="<@objectid>">
		<#objectstatus name="unusualsens" id="<@objectid>">
		<#objectstatus name="undefinedsens" id="<@objectid>">
	</span>
	<#mapobject type="htmlafter" subid="<@subid>">
</div>

You can get really creative using this method to produce quality maps and displays.

use of customerstyle.css seems to be a good workaround , I followed instructions above but cannot see my set of icons... any hints ?

I created the CSS file , I copied new icons over and I made an htm file (called it vpn.htm) under map objects...

Please try if restarting the PRTG Core Service does help.

My icon showed up but just part of it . it's a 500pxx100px symbole , but only a little part of it is showing up. I tried adding Height and Width parameters to customestyle.css but still getting the same ... just one part of the symbole showes up.

same thing , how your map icon htm uses customerstyle.css ? in your CSS ; you used map_icon_xl but in the htm you are referring map_icon_large ...