Add custom icons (Web Player)

Suggest Edits

JW8 uses inline SVGs for all player icons to allow for styling flexibility with CSS. Our CSS Skinning Reference lists all SVG class names.

Replace default icons with custom icons

To override the player's default icons, use CSS to target and hide the <svg>'s child <path> with display:none. Then, set the background image attribute on the SVG's selector to reference your own custom icon.

.jw-svg-icon-play path {	
  display: none;
}
.jw-svg-icon-play {
  background-image: url('//sample-icons.jwplayer.com/icons/play.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.jw-svg-icon-buffer path {
  display: none;
}

.jw-svg-icon-buffer {
  background-image: url('//sample-icons.jwplayer.com/icons/buffer.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.jw-svg-icon-replay path {	
  display: none;
}

.jw-svg-icon-replay {
  background-image: url('//sample-icons.jwplayer.com/icons/replay.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.jw-state-idle .jw-svg-icon-play path {	
  display: none;
}
.jw-state-idle .jw-svg-icon-play {
  background-image: url('//sample-icons.jwplayer.com/icons/play.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

To isolate an icon in a specific state of the player that will not affect other instances of that icon, simply add a flag as a prefix. The previous example shows how to replace the large play icon on idle state without affecting the play icon in the control bar using the explicit flag .jw-state-idle. See our CSS Skinning Reference for a list of all player states.

Updated about 1 year ago