Developer Guide Javascript API Reference Developer Tools Release Notes

Custom Icons

This demo shows how to replace the player's default control icons with your own.

github

For a guide on how to use CSS to replace icons in the player see our documentation on Custom Icons in the JW Player Developer Guide.

/* PLAYBACK */
.jw-state-idle .jw-svg-icon-play path {
	display: none;
}

.jw-state-idle .jw-svg-icon-play {
	background-image: url("assets/play-idle.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-state-idle .jw-display-icon-container:hover .jw-svg-icon-play {
	background-image: url("assets/play-idle-hover.svg");
}

.jw-state-paused .jw-svg-icon-play path {
	display: none;
}

.jw-state-paused .jw-svg-icon-play {
	background-image: url("assets/play.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-state-paused .jw-icon-playback:hover .jw-svg-icon-play {
	background-image: url("assets/play-hover.svg");
}

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

.jw-svg-icon-pause {
	background-image: url("assets/pause.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-icon-playback:hover .jw-svg-icon-pause {
	background-image: url("assets/pause-hover.svg");
}

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

.jw-svg-icon-buffer {
	background-image: url("assets/buffer.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

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

.jw-svg-icon-replay {
	background-image: url("assets/replay.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-icon-replay:hover .jw-svg-icon-replay {
	background-image: url("assets/replay-hover.svg");
}

/* REWIND */
.jw-svg-icon-rewind path {
	display: none;
}

.jw-svg-icon-rewind {
	background-image: url("assets/rewind.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-icon-rewind:hover .jw-svg-icon-rewind {
	background-image: url("assets/rewind-hover.svg");
}

/* NEXT */
.jw-svg-icon-next path {
	display: none;
}

.jw-svg-icon-next {
	background-image: url("assets/next.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-icon-next:hover .jw-svg-icon-next {
	background-image: url("assets/next-hover.svg");
}

/* VOLUME */
.jw-svg-icon-volume-100 path {
	display: none;
}

.jw-svg-icon-volume-100 {
	background-image: url("assets/volume-on.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-icon-volume:hover .jw-svg-icon-volume-100 {
	background-image: url("assets/volume-on-hover.svg");
}

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

.jw-svg-icon-volume-0 {
	background-image: url("assets/volume-off.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-icon-volume:hover .jw-svg-icon-volume-0 {
	background-image: url("assets/volume-off-hover.svg");
}

/* CLOSED CAPTIONS */
.jw-svg-icon-cc-off path {
	display: none;
}

.jw-svg-icon-cc-off {
	background-image: url("assets/captions.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-icon-cc-off:hover .jw-svg-icon-cc-off {
	background-image: url("assets/captions-hover.svg");
}

/* PLAYLIST */
.jw-svg-icon-playlist path {
	display: none;
}

.jw-svg-icon-playlist {
	background-image: url("assets/playlist.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-playlist-btn:hover .jw-svg-icon-playlist {
	background-image: url("assets/playlist-hover.svg");
}

/* SETTINGS MENU */
.jw-svg-icon-settings path {
	display: none;
}

.jw-svg-icon-settings {
	background-image: url("assets/settings.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-icon-settings:hover .jw-svg-icon-settings {
	background-image: url("assets/settings-hover.svg");
}

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

.jw-svg-icon-quality-100 {
	background-image: url("assets/quality.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-settings-quality:hover .jw-svg-icon-quality-100 {
	background-image: url("assets/quality-hover.svg");
}

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

.jw-svg-icon-close {
	background-image: url("assets/close.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-settings-close:hover .jw-svg-icon-close {
	background-image: url("assets/close-hover.svg");
}

/* FULLSCREEN */
.jw-svg-icon-fullscreen-on path {
	display: none;
}

.jw-svg-icon-fullscreen-on {
	background-image: url("assets/fullscreen-on.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-icon-fullscreen:hover .jw-svg-icon-fullscreen-on {
	background-image: url("assets/fullscreen-on-hover.svg");
}

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

.jw-svg-icon-fullscreen-off {
	background-image: url("assets/fullscreen-off.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.jw-icon-fullscreen:hover .jw-svg-icon-fullscreen-off {
	background-image: url("assets/fullscreen-off-hover.svg");
}
This player implementation is a Proof of Concept only provided to show the possibilities of the JW Player and Platform and should not be taken as an offer to create, edit or maintain custom integration or development.