<img src="https://img.shields.io/badge/%20-ALL-%2300B180" style="float:left"/><br />

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

<br /> <hr />

## 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.

<br />

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.

<br />

<!-- Removes the automatic page-to-page navigation at the bottom of the page -->

<style> .rm-Pagination { display: none; } </style>