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");
}