NIR with icon font

by Comandeer

HTML

<span class="icon icon_big">
	<span class="icon__image" data-icon="email" aria-hidden="true"></span>
	<span class="icon__label">E-mail</span>
</span>

<button>Toggle icon</button>

CSS

.icon {
	display: inline-block;
	height: 1em;
	overflow:hidden;
}
.icon_big {
	font-size: 96px;
}
.icon__image, .icon__label {
	display: block;
}
.icon__image_hidden {
	display: none;
}
[data-icon=email]::before {
	content: '📧';
}

JavaScript

document.querySelector( 'button' ).addEventListener( 'click', function() {
	document.querySelector( '.icon__image' ).classList.toggle( 'icon__image_hidden' );
}, false );