JSFiddle - React, Tailwind, and code Playground

by ibcaliax

HTML

<div class='icon chat'></div>

<div class='icon mic-on'></div>

<div class='icon mic-off'></div>

CSS

.icon {
	width: 20px;
	height: 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.icon.chat {
	background-color: blue;
	background-image: url('https://sync.mediasoup.org/resources/images/ActionsBox/icon_chat_on.svg');
}

.icon.mic-on {
	background-color: green;
	background-image: url('https://sync.mediasoup.org/resources/images/LocalControls/icon_mic_on.svg');
}

.icon.mic-off {
	background-color: yellow;
	background-image: url('https://sync.mediasoup.org/resources/images/LocalControls/icon_mic_off.svg');
}