<ul>
	<li><span class=icon>🚲</span>   Bicycles</li>
	<li><span class=icon>✈️</span>   Planes</li>
	<li><span class=icon>🚂</span>   Trains</li>
</ul>
<ul>
	<li><span class=icon>📥</span>   Inbox</li>
	<li><span class=icon>📤</span>   Outbox</li>
	<li><span class=icon>📁</span>   Folder</li>
</ul>

.icon {
	color: transparent;
	text-shadow: 0 0 #ec2930;
}
ul {
	list-style: none;
	font: 20pt "crimson text";
	display: inline-block;
	padding: 40px;
	height: auto;
	width: max-content;
	width: -moz-max-content;
	width: -webkit-max-content;
	color: #444;
	background-color: #f1ec37;
	box-shadow: 0 0 2px lightpink;
	text-align: left;
	margin: 10px 0 0 0;
}
ul:first-child {
	margin-right: 30px;
}
li {
	white-space: pre;
	margin-bottom: 6px;
}
body {
	text-align: center;
}
@supports not ((width: -moz-max-content) or (width: -webkit-max-content) or (width: max-content)) {
	ul {
		width: 100px;
	}
}