@momentum-ui/icons-rebrand
Version:
The Cisco Momentum UI Icons library allows developers to easily incorporate Webex Icons and CSS into any application.
1,510 lines (1,507 loc) • 516 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Icons Fonts Preview</title>
<link rel="stylesheet" href="../css/momentum-ui-icons.css">
<style>
body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 1fr;
grid-gap: 10px;
padding: 10px;
margin: 0;
align-items: center;
justify-items: center;
}
.icon-card {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
border-radius: 4px;
box-shadow: 0px 1px 5px #aeaeae;
justify-content: space-around;
align-items: center;
}
.icon-container {
display: flex;
align-items: center;
justify-content: center;
}
.icon-name {
margin-top: 5px;
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
monospace;
font-size: 12px;
text-align: center;
color: #333;
}
/* IE 11 only: */
@media all and (-ms-high-contrast: none) {
body {
text-align: center;
}
.icon-card {
vertical-align: top;
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
}
}
</style>
</head>
<body>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-accessibility-bold"></div>
</div>
<div class="icon-name">accessibility-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-accessibility-light"></div>
</div>
<div class="icon-name">accessibility-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-accessibility-regular"></div>
</div>
<div class="icon-name">accessibility-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-accessories-bold"></div>
</div>
<div class="icon-name">accessories-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-accessories-filled"></div>
</div>
<div class="icon-name">accessories-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-accessories-light"></div>
</div>
<div class="icon-name">accessories-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-accessories-regular"></div>
</div>
<div class="icon-name">accessories-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-accordian-bold"></div>
</div>
<div class="icon-name">accordian-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-accordian-light"></div>
</div>
<div class="icon-name">accordian-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-accordian-regular"></div>
</div>
<div class="icon-name">accordian-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-active-presence-small-filled"></div>
</div>
<div class="icon-name">active-presence-small-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-active-speaker-alert-bold"></div>
</div>
<div class="icon-name">active-speaker-alert-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-active-speaker-alert-light"></div>
</div>
<div class="icon-name">active-speaker-alert-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-active-speaker-alert-regular"></div>
</div>
<div class="icon-name">active-speaker-alert-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-active-speaker-bold"></div>
</div>
<div class="icon-name">active-speaker-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-active-speaker-light"></div>
</div>
<div class="icon-name">active-speaker-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-active-speaker-lock-bold"></div>
</div>
<div class="icon-name">active-speaker-lock-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-active-speaker-lock-light"></div>
</div>
<div class="icon-name">active-speaker-lock-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-active-speaker-lock-regular"></div>
</div>
<div class="icon-name">active-speaker-lock-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-active-speaker-regular"></div>
</div>
<div class="icon-name">active-speaker-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-add-option-bold"></div>
</div>
<div class="icon-name">add-option-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-add-option-light"></div>
</div>
<div class="icon-name">add-option-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-add-option-regular"></div>
</div>
<div class="icon-name">add-option-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-add-poll-bold"></div>
</div>
<div class="icon-name">add-poll-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-add-poll-light"></div>
</div>
<div class="icon-name">add-poll-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-add-poll-regular"></div>
</div>
<div class="icon-name">add-poll-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-add-question-bold"></div>
</div>
<div class="icon-name">add-question-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-add-question-light"></div>
</div>
<div class="icon-name">add-question-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-add-question-regular"></div>
</div>
<div class="icon-name">add-question-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-add-video-marker-bold"></div>
</div>
<div class="icon-name">add-video-marker-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-add-video-marker-light"></div>
</div>
<div class="icon-name">add-video-marker-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-add-video-marker-regular"></div>
</div>
<div class="icon-name">add-video-marker-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-adjust-audio-bold"></div>
</div>
<div class="icon-name">adjust-audio-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-adjust-audio-light"></div>
</div>
<div class="icon-name">adjust-audio-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-adjust-audio-regular"></div>
</div>
<div class="icon-name">adjust-audio-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-adjust-bold"></div>
</div>
<div class="icon-name">adjust-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-adjust-light"></div>
</div>
<div class="icon-name">adjust-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-adjust-microphone-bold"></div>
</div>
<div class="icon-name">adjust-microphone-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-adjust-microphone-light"></div>
</div>
<div class="icon-name">adjust-microphone-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-adjust-microphone-regular"></div>
</div>
<div class="icon-name">adjust-microphone-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-adjust-regular"></div>
</div>
<div class="icon-name">adjust-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-adjust-video-bold"></div>
</div>
<div class="icon-name">adjust-video-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-adjust-video-light"></div>
</div>
<div class="icon-name">adjust-video-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-adjust-video-regular"></div>
</div>
<div class="icon-name">adjust-video-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-admin-bold"></div>
</div>
<div class="icon-name">admin-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-admin-light"></div>
</div>
<div class="icon-name">admin-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-admin-regular"></div>
</div>
<div class="icon-name">admin-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-advanced-noise-removal-bold"></div>
</div>
<div class="icon-name">advanced-noise-removal-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-advanced-noise-removal-light"></div>
</div>
<div class="icon-name">advanced-noise-removal-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-advanced-noise-removal-regular"></div>
</div>
<div class="icon-name">advanced-noise-removal-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-agent-unique-code-bold"></div>
</div>
<div class="icon-name">agent-unique-code-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-agent-unique-code-light"></div>
</div>
<div class="icon-name">agent-unique-code-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-agent-unique-code-regular"></div>
</div>
<div class="icon-name">agent-unique-code-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alarm-bold"></div>
</div>
<div class="icon-name">alarm-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alarm-filled"></div>
</div>
<div class="icon-name">alarm-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alarm-light"></div>
</div>
<div class="icon-name">alarm-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alarm-regular"></div>
</div>
<div class="icon-name">alarm-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alert-active-bold"></div>
</div>
<div class="icon-name">alert-active-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alert-active-filled"></div>
</div>
<div class="icon-name">alert-active-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alert-active-light"></div>
</div>
<div class="icon-name">alert-active-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alert-active-regular"></div>
</div>
<div class="icon-name">alert-active-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alert-bold"></div>
</div>
<div class="icon-name">alert-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alert-filled"></div>
</div>
<div class="icon-name">alert-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alert-light"></div>
</div>
<div class="icon-name">alert-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alert-muted-bold"></div>
</div>
<div class="icon-name">alert-muted-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alert-muted-filled"></div>
</div>
<div class="icon-name">alert-muted-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alert-muted-light"></div>
</div>
<div class="icon-name">alert-muted-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alert-muted-regular"></div>
</div>
<div class="icon-name">alert-muted-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alert-regular"></div>
</div>
<div class="icon-name">alert-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-bottom-bold"></div>
</div>
<div class="icon-name">align-bottom-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-bottom-filled"></div>
</div>
<div class="icon-name">align-bottom-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-bottom-light"></div>
</div>
<div class="icon-name">align-bottom-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-bottom-regular"></div>
</div>
<div class="icon-name">align-bottom-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-horizontal-center-bold"></div>
</div>
<div class="icon-name">align-horizontal-center-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-horizontal-center-filled"></div>
</div>
<div class="icon-name">align-horizontal-center-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-horizontal-center-light"></div>
</div>
<div class="icon-name">align-horizontal-center-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-horizontal-center-regular"></div>
</div>
<div class="icon-name">align-horizontal-center-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-left-bold"></div>
</div>
<div class="icon-name">align-left-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-left-filled"></div>
</div>
<div class="icon-name">align-left-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-left-light"></div>
</div>
<div class="icon-name">align-left-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-left-regular"></div>
</div>
<div class="icon-name">align-left-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-right-bold"></div>
</div>
<div class="icon-name">align-right-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-right-filled"></div>
</div>
<div class="icon-name">align-right-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-right-light"></div>
</div>
<div class="icon-name">align-right-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-right-regular"></div>
</div>
<div class="icon-name">align-right-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-top-bold"></div>
</div>
<div class="icon-name">align-top-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-top-filled"></div>
</div>
<div class="icon-name">align-top-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-top-light"></div>
</div>
<div class="icon-name">align-top-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-top-regular"></div>
</div>
<div class="icon-name">align-top-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-vertical-center-bold"></div>
</div>
<div class="icon-name">align-vertical-center-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-vertical-center-filled"></div>
</div>
<div class="icon-name">align-vertical-center-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-vertical-center-light"></div>
</div>
<div class="icon-name">align-vertical-center-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-align-vertical-center-regular"></div>
</div>
<div class="icon-name">align-vertical-center-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-allow-to-annotate-bold"></div>
</div>
<div class="icon-name">allow-to-annotate-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-allow-to-annotate-light"></div>
</div>
<div class="icon-name">allow-to-annotate-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-allow-to-annotate-regular"></div>
</div>
<div class="icon-name">allow-to-annotate-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alternate-response-bold"></div>
</div>
<div class="icon-name">alternate-response-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alternate-response-light"></div>
</div>
<div class="icon-name">alternate-response-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-alternate-response-regular"></div>
</div>
<div class="icon-name">alternate-response-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-analog-headset-bold"></div>
</div>
<div class="icon-name">analog-headset-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-analog-headset-light"></div>
</div>
<div class="icon-name">analog-headset-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-analog-headset-regular"></div>
</div>
<div class="icon-name">analog-headset-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-analysis-bold"></div>
</div>
<div class="icon-name">analysis-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-analysis-filled"></div>
</div>
<div class="icon-name">analysis-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-analysis-light"></div>
</div>
<div class="icon-name">analysis-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-analysis-regular"></div>
</div>
<div class="icon-name">analysis-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-annotate-bold"></div>
</div>
<div class="icon-name">annotate-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-annotate-filled"></div>
</div>
<div class="icon-name">annotate-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-annotate-light"></div>
</div>
<div class="icon-name">annotate-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-annotate-regular"></div>
</div>
<div class="icon-name">annotate-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-announcement-bold"></div>
</div>
<div class="icon-name">announcement-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-announcement-filled"></div>
</div>
<div class="icon-name">announcement-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-announcement-light"></div>
</div>
<div class="icon-name">announcement-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-announcement-muted-bold"></div>
</div>
<div class="icon-name">announcement-muted-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-announcement-muted-filled"></div>
</div>
<div class="icon-name">announcement-muted-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-announcement-muted-light"></div>
</div>
<div class="icon-name">announcement-muted-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-announcement-muted-regular"></div>
</div>
<div class="icon-name">announcement-muted-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-announcement-regular"></div>
</div>
<div class="icon-name">announcement-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-appearance-bold"></div>
</div>
<div class="icon-name">appearance-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-appearance-light"></div>
</div>
<div class="icon-name">appearance-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-appearance-regular"></div>
</div>
<div class="icon-name">appearance-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-applause-bold"></div>
</div>
<div class="icon-name">applause-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-applause-light"></div>
</div>
<div class="icon-name">applause-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-applause-regular"></div>
</div>
<div class="icon-name">applause-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-apple-bold"></div>
</div>
<div class="icon-name">apple-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-apple-filled"></div>
</div>
<div class="icon-name">apple-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-apple-light"></div>
</div>
<div class="icon-name">apple-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-apple-regular"></div>
</div>
<div class="icon-name">apple-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-application-bold"></div>
</div>
<div class="icon-name">application-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-application-light"></div>
</div>
<div class="icon-name">application-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-application-panel-bold"></div>
</div>
<div class="icon-name">application-panel-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-application-panel-light"></div>
</div>
<div class="icon-name">application-panel-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-application-panel-regular"></div>
</div>
<div class="icon-name">application-panel-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-application-regular"></div>
</div>
<div class="icon-name">application-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-applications-bold"></div>
</div>
<div class="icon-name">applications-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-applications-light"></div>
</div>
<div class="icon-name">applications-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-applications-regular"></div>
</div>
<div class="icon-name">applications-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-approval-pending-bold"></div>
</div>
<div class="icon-name">approval-pending-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-approval-pending-light"></div>
</div>
<div class="icon-name">approval-pending-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-approval-pending-regular"></div>
</div>
<div class="icon-name">approval-pending-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-approvals-bold"></div>
</div>
<div class="icon-name">approvals-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-approvals-light"></div>
</div>
<div class="icon-name">approvals-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-approvals-regular"></div>
</div>
<div class="icon-name">approvals-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-apps-bold"></div>
</div>
<div class="icon-name">apps-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-apps-filled"></div>
</div>
<div class="icon-name">apps-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-apps-light"></div>
</div>
<div class="icon-name">apps-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-apps-regular"></div>
</div>
<div class="icon-name">apps-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-archive-bold"></div>
</div>
<div class="icon-name">archive-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-archive-light"></div>
</div>
<div class="icon-name">archive-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-archive-regular"></div>
</div>
<div class="icon-name">archive-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-area-chart-bold"></div>
</div>
<div class="icon-name">area-chart-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-area-chart-filled"></div>
</div>
<div class="icon-name">area-chart-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-area-chart-light"></div>
</div>
<div class="icon-name">area-chart-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-area-chart-regular"></div>
</div>
<div class="icon-name">area-chart-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-area-selector-bold"></div>
</div>
<div class="icon-name">area-selector-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-area-selector-light"></div>
</div>
<div class="icon-name">area-selector-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-area-selector-regular"></div>
</div>
<div class="icon-name">area-selector-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-down-bold"></div>
</div>
<div class="icon-name">arrow-circle-down-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-down-filled"></div>
</div>
<div class="icon-name">arrow-circle-down-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-down-light"></div>
</div>
<div class="icon-name">arrow-circle-down-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-down-regular"></div>
</div>
<div class="icon-name">arrow-circle-down-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-left-bold"></div>
</div>
<div class="icon-name">arrow-circle-left-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-left-filled"></div>
</div>
<div class="icon-name">arrow-circle-left-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-left-light"></div>
</div>
<div class="icon-name">arrow-circle-left-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-left-regular"></div>
</div>
<div class="icon-name">arrow-circle-left-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-right-bold"></div>
</div>
<div class="icon-name">arrow-circle-right-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-right-filled"></div>
</div>
<div class="icon-name">arrow-circle-right-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-right-light"></div>
</div>
<div class="icon-name">arrow-circle-right-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-right-regular"></div>
</div>
<div class="icon-name">arrow-circle-right-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-up-bold"></div>
</div>
<div class="icon-name">arrow-circle-up-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-up-filled"></div>
</div>
<div class="icon-name">arrow-circle-up-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-up-light"></div>
</div>
<div class="icon-name">arrow-circle-up-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-circle-up-regular"></div>
</div>
<div class="icon-name">arrow-circle-up-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-down-bold"></div>
</div>
<div class="icon-name">arrow-down-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-down-filled"></div>
</div>
<div class="icon-name">arrow-down-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-down-light"></div>
</div>
<div class="icon-name">arrow-down-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-down-optical-regular"></div>
</div>
<div class="icon-name">arrow-down-optical-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-left-bold"></div>
</div>
<div class="icon-name">arrow-left-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-left-filled"></div>
</div>
<div class="icon-name">arrow-left-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-left-light"></div>
</div>
<div class="icon-name">arrow-left-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-left-regular"></div>
</div>
<div class="icon-name">arrow-left-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-right-bold"></div>
</div>
<div class="icon-name">arrow-right-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-right-filled"></div>
</div>
<div class="icon-name">arrow-right-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-right-light"></div>
</div>
<div class="icon-name">arrow-right-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-right-regular"></div>
</div>
<div class="icon-name">arrow-right-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-tail-down-bold"></div>
</div>
<div class="icon-name">arrow-tail-down-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-tail-down-light"></div>
</div>
<div class="icon-name">arrow-tail-down-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-tail-down-regular"></div>
</div>
<div class="icon-name">arrow-tail-down-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-tail-up-bold"></div>
</div>
<div class="icon-name">arrow-tail-up-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-tail-up-light"></div>
</div>
<div class="icon-name">arrow-tail-up-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-tail-up-regular"></div>
</div>
<div class="icon-name">arrow-tail-up-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-up-bold"></div>
</div>
<div class="icon-name">arrow-up-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-up-filled"></div>
</div>
<div class="icon-name">arrow-up-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-up-light"></div>
</div>
<div class="icon-name">arrow-up-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-arrow-up-regular"></div>
</div>
<div class="icon-name">arrow-up-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-ask-for-help-bold"></div>
</div>
<div class="icon-name">ask-for-help-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-ask-for-help-filled"></div>
</div>
<div class="icon-name">ask-for-help-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-ask-for-help-light"></div>
</div>
<div class="icon-name">ask-for-help-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-ask-for-help-regular"></div>
</div>
<div class="icon-name">ask-for-help-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-assets-bold"></div>
</div>
<div class="icon-name">assets-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-assets-light"></div>
</div>
<div class="icon-name">assets-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-assets-regular"></div>
</div>
<div class="icon-name">assets-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-assign-host-bold"></div>
</div>
<div class="icon-name">assign-host-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-assign-host-light"></div>
</div>
<div class="icon-name">assign-host-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-assign-host-regular"></div>
</div>
<div class="icon-name">assign-host-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-assign-privilege-bold"></div>
</div>
<div class="icon-name">assign-privilege-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-assign-privilege-light"></div>
</div>
<div class="icon-name">assign-privilege-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-assign-privilege-regular"></div>
</div>
<div class="icon-name">assign-privilege-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-at-symbol-bold"></div>
</div>
<div class="icon-name">at-symbol-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-at-symbol-light"></div>
</div>
<div class="icon-name">at-symbol-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-at-symbol-regular"></div>
</div>
<div class="icon-name">at-symbol-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-attachment-bold"></div>
</div>
<div class="icon-name">attachment-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-attachment-light"></div>
</div>
<div class="icon-name">attachment-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-attachment-regular"></div>
</div>
<div class="icon-name">attachment-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-broadcast-bold"></div>
</div>
<div class="icon-name">audio-broadcast-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-broadcast-light"></div>
</div>
<div class="icon-name">audio-broadcast-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-broadcast-regular"></div>
</div>
<div class="icon-name">audio-broadcast-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-call-bold"></div>
</div>
<div class="icon-name">audio-call-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-call-filled"></div>
</div>
<div class="icon-name">audio-call-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-call-light"></div>
</div>
<div class="icon-name">audio-call-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-call-regular"></div>
</div>
<div class="icon-name">audio-call-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-microphone-on-bold"></div>
</div>
<div class="icon-name">audio-microphone-on-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-microphone-on-colored-bold"></div>
</div>
<div class="icon-name">audio-microphone-on-colored-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-microphone-on-colored-light"></div>
</div>
<div class="icon-name">audio-microphone-on-colored-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-microphone-on-colored-regular"></div>
</div>
<div class="icon-name">audio-microphone-on-colored-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-microphone-on-green-bold"></div>
</div>
<div class="icon-name">audio-microphone-on-green-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-microphone-on-green-colored-bold"></div>
</div>
<div class="icon-name">audio-microphone-on-green-colored-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-microphone-on-green-colored-light"></div>
</div>
<div class="icon-name">audio-microphone-on-green-colored-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-microphone-on-green-colored-regular"></div>
</div>
<div class="icon-name">audio-microphone-on-green-colored-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-microphone-on-green-light"></div>
</div>
<div class="icon-name">audio-microphone-on-green-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-microphone-on-green-regular"></div>
</div>
<div class="icon-name">audio-microphone-on-green-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-microphone-on-light"></div>
</div>
<div class="icon-name">audio-microphone-on-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-microphone-on-regular"></div>
</div>
<div class="icon-name">audio-microphone-on-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-only-bold"></div>
</div>
<div class="icon-name">audio-only-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-only-light"></div>
</div>
<div class="icon-name">audio-only-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-only-regular"></div>
</div>
<div class="icon-name">audio-only-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-options-bold"></div>
</div>
<div class="icon-name">audio-options-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-options-filled"></div>
</div>
<div class="icon-name">audio-options-filled</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-options-light"></div>
</div>
<div class="icon-name">audio-options-light</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-audio-options-regular"></div>
</div>
<div class="icon-name">audio-options-regular</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-auto-detection-bold"></div>
</div>
<div class="icon-name">auto-detection-bold</div>
</div>
<div class="icon-card">
<div class="icon-container">
<div class="icon icon-auto-detection-light"></div>