eos-icons
Version:
The iconic and open source font made for EOS Design System.
2,192 lines (1,904 loc) • 386 kB
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
eos-icons demo page
</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<style>
body {
background: #fff;
color: #141823;
font-size: 16px;
font-family: 'Lato', sans-serif;
font-weight: 400;
margin: 0;
}
.container {
padding: 16px;
}
header {
background: #fe673a;
margin-bottom: 2em;
position: fixed;
top: 0px;
width: 100%;
z-index: 1;
}
.icons-container {
margin-top: 120px;
}
h1,
footer {
font-family: 'Lato', sans-serif;
font-weight: 300;
}
h1 {
font-size: 32px;
margin: 0px;
color: white;
}
h2 small {
font-size: 0.5em;
}
h3 {
text-align: center;
}
.latest {
border: 1px solid #b7b7b7;
margin-bottom: 30px;
}
.two-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.icons__item,
.icons__item i {
cursor: pointer;
text-align: center;
}
.icons__item:hover {
color: #fe673a;
}
.icons__item {
display: inline-block;
margin-bottom: 3em;
width: 200px;
}
.icons__item i {
font-size: 48px;
}
.how-to-use,
.how-to-use-animated {
background: #333;
bottom: 44px;
position: fixed;
width: 100%;
}
footer {
background: #ededed;
bottom: 0px;
color: #999;
font-size: 14px;
position: fixed;
width: 100%;
}
.text-white {
color: white
}
pre {
background: #dedede;
padding: 16px;
}
.pull-right {
float: right;
}
#close-code-snippet,
#close-code-snippet-animated {
cursor: pointer;
}
.eos-logo-color-gradients {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff890a+0,ff420a+50,bc0289+100 */
background: #ff890a;
background: -moz-linear-gradient(-45deg, #ff890a 0%, #ff420a 50%, #bc0289 100%);
background: -webkit-linear-gradient(-45deg, #ff890a 0%, #ff420a 50%, #bc0289 100%);
background: linear-gradient(135deg, #ff890a 0%, #ff420a 50%, #bc0289 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff890a', endColorstr='#bc0289', GradientType=1);
}
.toolbar {
padding: 10px;
}
.version {
font-size: 12px;
}
.extended-version-wrap {
margin-bottom: 10px;
display: flex;
margin: 0 0 30px 60px;
}
.extended-version-wrap a {
padding: 10px 14px;
background: #e6e6e6;
border-radius: 5px;
color: #1f1f1f;
text-decoration: none;
border: 1px solid #d0d0d0;
}
#icons-animated img {
width: 48px;
}
/* switch button css */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
margin: 0 10px 20px 0;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 12px;
}
.slider.round:before {
border-radius: 50%;
}
/* Rounded sliders */
.tabs-container {
display: flex;
}
.icons-tab {
width: 25%;
text-align: center;
padding: 10px;
border: 1px solid #b7b7b7;
border-bottom: 0;
cursor: pointer;
}
.icons-tab:first-of-type {
border-right: 0;
}
.selected {
background-color: #333;
color: #fff;
}
.controls {
display: flex;
position: relative;
top: -10px;
}
.controls>div {
margin-right: 15px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/eos-icons.css" id="css-link">
<link rel="stylesheet" type="text/css" href="css/eos-icons-outlined.css" id="css-link">
<script src='js/eos-icons.js'></script>
</head>
<body>
<header class='eos-logo-color-gradients'>
<div class='container two-columns'>
<h1>
EOS Icons
</h1>
<div class='pull-right toolbar'>
<span class='text-white'>Try different sizes: </span>
<button class='change-size' data-size='18'>18px</button>
<button class='change-size' data-size='24'>24px</button>
<button class='change-size' data-size='36'>36px</button>
<button class='change-size' data-size='48'>48px</button>
</div>
</div>
</header>
<div id="eos-icons-preview" class='container icons-container'>
<div class="controls">
<div>
<label id='switch-outlined-icon' class='switch'>
<input type='checkbox' id='switch-checkbox'>
<span class='slider round'></span>
</label>
Outline version
</div>
<a href="comparison.html">Compare styles</a>
</div>
<div id='tab' class="tabs-container">
<div class='icons-tab selected' data-name='eos-icons'>EOS</div>
<div class='icons-tab' data-name='md-icons'>Material Design</div>
</div>
<div class='latest'>
<h3>New icons since last release:</h3>
<div class='latest-icons'></div>
</div>
<div id="icons">
<div class="icons__item" data-name="3d_print">
<i class="eos-icons">
3d_print
</i>
<br>
3d_print
</div>
<div class="icons__item" data-name="abstract_incomplete">
<i class="eos-icons">
abstract_incomplete
</i>
<br>
abstract_incomplete
</div>
<div class="icons__item" data-name="abstract_instance">
<i class="eos-icons">
abstract_instance
</i>
<br>
abstract_instance
</div>
<div class="icons__item" data-name="abstract">
<i class="eos-icons">
abstract
</i>
<br>
abstract
</div>
<div class="icons__item" data-name="action_chains">
<i class="eos-icons">
action_chains
</i>
<br>
action_chains
</div>
<div class="icons__item" data-name="activate_subscriptions">
<i class="eos-icons">
activate_subscriptions
</i>
<br>
activate_subscriptions
</div>
<div class="icons__item" data-name="admin">
<i class="eos-icons">
admin
</i>
<br>
admin
</div>
<div class="icons__item" data-name="ai_healing">
<i class="eos-icons">
ai_healing
</i>
<br>
ai_healing
</div>
<div class="icons__item" data-name="ai_operator">
<i class="eos-icons">
ai_operator
</i>
<br>
ai_operator
</div>
<div class="icons__item" data-name="ai">
<i class="eos-icons">
ai
</i>
<br>
ai
</div>
<div class="icons__item" data-name="api">
<i class="eos-icons">
api
</i>
<br>
api
</div>
<div class="icons__item" data-name="application_incomplete">
<i class="eos-icons">
application_incomplete
</i>
<br>
application_incomplete
</div>
<div class="icons__item" data-name="application_instance">
<i class="eos-icons">
application_instance
</i>
<br>
application_instance
</div>
<div class="icons__item" data-name="application_window">
<i class="eos-icons">
application_window
</i>
<br>
application_window
</div>
<div class="icons__item" data-name="application">
<i class="eos-icons">
application
</i>
<br>
application
</div>
<div class="icons__item" data-name="augmented_reality">
<i class="eos-icons">
augmented_reality
</i>
<br>
augmented_reality
</div>
<div class="icons__item" data-name="autoinstallation">
<i class="eos-icons">
autoinstallation
</i>
<br>
autoinstallation
</div>
<div class="icons__item" data-name="background_tasks">
<i class="eos-icons">
background_tasks
</i>
<br>
background_tasks
</div>
<div class="icons__item" data-name="big_data">
<i class="eos-icons">
big_data
</i>
<br>
big_data
</div>
<div class="icons__item" data-name="blockchain">
<i class="eos-icons">
blockchain
</i>
<br>
blockchain
</div>
<div class="icons__item" data-name="bootstrapping">
<i class="eos-icons">
bootstrapping
</i>
<br>
bootstrapping
</div>
<div class="icons__item" data-name="branch">
<i class="eos-icons">
branch
</i>
<br>
branch
</div>
<div class="icons__item" data-name="cleanup">
<i class="eos-icons">
cleanup
</i>
<br>
cleanup
</div>
<div class="icons__item" data-name="cloud_computing">
<i class="eos-icons">
cloud_computing
</i>
<br>
cloud_computing
</div>
<div class="icons__item" data-name="cloud_controller_manager">
<i class="eos-icons">
cloud_controller_manager
</i>
<br>
cloud_controller_manager
</div>
<div class="icons__item" data-name="cluster_management">
<i class="eos-icons">
cluster_management
</i>
<br>
cluster_management
</div>
<div class="icons__item" data-name="cluster_role_binding">
<i class="eos-icons">
cluster_role_binding
</i>
<br>
cluster_role_binding
</div>
<div class="icons__item" data-name="cluster_role">
<i class="eos-icons">
cluster_role
</i>
<br>
cluster_role
</div>
<div class="icons__item" data-name="cluster">
<i class="eos-icons">
cluster
</i>
<br>
cluster
</div>
<div class="icons__item" data-name="code_deploy">
<i class="eos-icons">
code_deploy
</i>
<br>
code_deploy
</div>
<div class="icons__item" data-name="collocation">
<i class="eos-icons">
collocation
</i>
<br>
collocation
</div>
<div class="icons__item" data-name="commit">
<i class="eos-icons">
commit
</i>
<br>
commit
</div>
<div class="icons__item" data-name="compare_states">
<i class="eos-icons">
compare_states
</i>
<br>
compare_states
</div>
<div class="icons__item" data-name="config_map">
<i class="eos-icons">
config_map
</i>
<br>
config_map
</div>
<div class="icons__item" data-name="configuration_file">
<i class="eos-icons">
configuration_file
</i>
<br>
configuration_file
</div>
<div class="icons__item" data-name="constraint">
<i class="eos-icons">
constraint
</i>
<br>
constraint
</div>
<div class="icons__item" data-name="container">
<i class="eos-icons">
container
</i>
<br>
container
</div>
<div class="icons__item" data-name="content_deleted">
<i class="eos-icons">
content_deleted
</i>
<br>
content_deleted
</div>
<div class="icons__item" data-name="content_lifecycle_management">
<i class="eos-icons">
content_lifecycle_management
</i>
<br>
content_lifecycle_management
</div>
<div class="icons__item" data-name="content_modified">
<i class="eos-icons">
content_modified
</i>
<br>
content_modified
</div>
<div class="icons__item" data-name="content_new">
<i class="eos-icons">
content_new
</i>
<br>
content_new
</div>
<div class="icons__item" data-name="counting">
<i class="eos-icons">
counting
</i>
<br>
counting
</div>
<div class="icons__item" data-name="critical_bug">
<i class="eos-icons">
critical_bug
</i>
<br>
critical_bug
</div>
<div class="icons__item" data-name="cronjob">
<i class="eos-icons">
cronjob
</i>
<br>
cronjob
</div>
<div class="icons__item" data-name="csv_file">
<i class="eos-icons">
csv_file
</i>
<br>
csv_file
</div>
<div class="icons__item" data-name="daemon_set">
<i class="eos-icons">
daemon_set
</i>
<br>
daemon_set
</div>
<div class="icons__item" data-name="daemon">
<i class="eos-icons">
daemon
</i>
<br>
daemon
</div>
<div class="icons__item" data-name="data_mining">
<i class="eos-icons">
data_mining
</i>
<br>
data_mining
</div>
<div class="icons__item" data-name="data_scientist">
<i class="eos-icons">
data_scientist
</i>
<br>
data_scientist
</div>
<div class="icons__item" data-name="database_migration">
<i class="eos-icons">
database_migration
</i>
<br>
database_migration
</div>
<div class="icons__item" data-name="database">
<i class="eos-icons">
database
</i>
<br>
database
</div>
<div class="icons__item" data-name="deploy">
<i class="eos-icons">
deploy
</i>
<br>
deploy
</div>
<div class="icons__item" data-name="diff_modified">
<i class="eos-icons">
diff_modified
</i>
<br>
diff_modified
</div>
<div class="icons__item" data-name="dns">
<i class="eos-icons">
dns
</i>
<br>
dns
</div>
<div class="icons__item" data-name="drone">
<i class="eos-icons">
drone
</i>
<br>
drone
</div>
<div class="icons__item" data-name="edge_computing">
<i class="eos-icons">
edge_computing
</i>
<br>
edge_computing
</div>
<div class="icons__item" data-name="endpoints_connected">
<i class="eos-icons">
endpoints_connected
</i>
<br>
endpoints_connected
</div>
<div class="icons__item" data-name="endpoints_disconnected">
<i class="eos-icons">
endpoints_disconnected
</i>
<br>
endpoints_disconnected
</div>
<div class="icons__item" data-name="endpoints">
<i class="eos-icons">
endpoints
</i>
<br>
endpoints
</div>
<div class="icons__item" data-name="enhancement">
<i class="eos-icons">
enhancement
</i>
<br>
enhancement
</div>
<div class="icons__item" data-name="env">
<i class="eos-icons">
env
</i>
<br>
env
</div>
<div class="icons__item" data-name="file_system">
<i class="eos-icons">
file_system
</i>
<br>
file_system
</div>
<div class="icons__item" data-name="flask">
<i class="eos-icons">
flask
</i>
<br>
flask
</div>
<div class="icons__item" data-name="fork">
<i class="eos-icons">
fork
</i>
<br>
fork
</div>
<div class="icons__item" data-name="genomic">
<i class="eos-icons">
genomic
</i>
<br>
genomic
</div>
<div class="icons__item" data-name="hardware_circuit">
<i class="eos-icons">
hardware_circuit
</i>
<br>
hardware_circuit
</div>
<div class="icons__item" data-name="inbound">
<i class="eos-icons">
inbound
</i>
<br>
inbound
</div>
<div class="icons__item" data-name="infinity">
<i class="eos-icons">
infinity
</i>
<br>
infinity
</div>
<div class="icons__item" data-name="ingress">
<i class="eos-icons">
ingress
</i>
<br>
ingress
</div>
<div class="icons__item" data-name="init_container">
<i class="eos-icons">
init_container
</i>
<br>
init_container
</div>
<div class="icons__item" data-name="iot">
<i class="eos-icons">
iot
</i>
<br>
iot
</div>
<div class="icons__item" data-name="ip">
<i class="eos-icons">
ip
</i>
<br>
ip
</div>
<div class="icons__item" data-name="job">
<i class="eos-icons">
job
</i>
<br>
job
</div>
<div class="icons__item" data-name="kubelet">
<i class="eos-icons">
kubelet
</i>
<br>
kubelet
</div>
<div class="icons__item" data-name="locked_env">
<i class="eos-icons">
locked_env
</i>
<br>
locked_env
</div>
<div class="icons__item" data-name="machine_learning">
<i class="eos-icons">
machine_learning
</i>
<br>
machine_learning
</div>
<div class="icons__item" data-name="master">
<i class="eos-icons">
master
</i>
<br>
master
</div>
<div class="icons__item" data-name="merge">
<i class="eos-icons">
merge
</i>
<br>
merge
</div>
<div class="icons__item" data-name="miscellaneous">
<i class="eos-icons">
miscellaneous
</i>
<br>
miscellaneous
</div>
<div class="icons__item" data-name="modified_date">
<i class="eos-icons">
modified_date
</i>
<br>
modified_date
</div>
<div class="icons__item" data-name="molecules">
<i class="eos-icons">
molecules
</i>
<br>
molecules
</div>
<div class="icons__item" data-name="monitoring">
<i class="eos-icons">
monitoring
</i>
<br>
monitoring
</div>
<div class="icons__item" data-name="move">
<i class="eos-icons">
move
</i>
<br>
move
</div>
<div class="icons__item" data-name="multistate">
<i class="eos-icons">
multistate
</i>
<br>
multistate
</div>
<div class="icons__item" data-name="namespace">
<i class="eos-icons">
namespace
</i>
<br>
namespace
</div>
<div class="icons__item" data-name="network_file_system">
<i class="eos-icons">
network_file_system
</i>
<br>
network_file_system
</div>
<div class="icons__item" data-name="network_policy">
<i class="eos-icons">
network_policy
</i>
<br>
network_policy
</div>
<div class="icons__item" data-name="network">
<i class="eos-icons">
network
</i>
<br>
network
</div>
<div class="icons__item" data-name="neural_network">
<i class="eos-icons">
neural_network
</i>
<br>
neural_network
</div>
<div class="icons__item" data-name="node">
<i class="eos-icons">
node
</i>
<br>
node
</div>
<div class="icons__item" data-name="organisms">
<i class="eos-icons">
organisms
</i>
<br>
organisms
</div>
<div class="icons__item" data-name="organization">
<i class="eos-icons">
organization
</i>
<br>
organization
</div>
<div class="icons__item" data-name="outbound">
<i class="eos-icons">
outbound
</i>
<br>
outbound
</div>
<div class="icons__item" data-name="package_upgrade">
<i class="eos-icons">
package_upgrade
</i>
<br>
package_upgrade
</div>
<div class="icons__item" data-name="package">
<i class="eos-icons">
package
</i>
<br>
package
</div>
<div class="icons__item" data-name="packages">
<i class="eos-icons">
packages
</i>
<br>
packages
</div>
<div class="icons__item" data-name="patch_fixes">
<i class="eos-icons">
patch_fixes
</i>
<br>
patch_fixes
</div>
<div class="icons__item" data-name="patterns">
<i class="eos-icons">
patterns
</i>
<br>
patterns
</div>
<div class="icons__item" data-name="performance">
<i class="eos-icons">
performance
</i>
<br>
performance
</div>
<div class="icons__item" data-name="persistent_volume">
<i class="eos-icons">
persistent_volume
</i>
<br>
persistent_volume
</div>
<div class="icons__item" data-name="pin">
<i class="eos-icons">
pin
</i>
<br>
pin
</div>
<div class="icons__item" data-name="pipeline">
<i class="eos-icons">
pipeline
</i>
<br>
pipeline
</div>
<div class="icons__item" data-name="pod_autoscaler">
<i class="eos-icons">
pod_autoscaler
</i>
<br>
pod_autoscaler
</div>
<div class="icons__item" data-name="pod_security">
<i class="eos-icons">
pod_security
</i>
<br>
pod_security
</div>
<div class="icons__item" data-name="pod">
<i class="eos-icons">
pod
</i>
<br>
pod
</div>
<div class="icons__item" data-name="primitive">
<i class="eos-icons">
primitive
</i>
<br>
primitive
</div>
<div class="icons__item" data-name="product_classes">
<i class="eos-icons">
product_classes
</i>
<br>
product_classes
</div>
<div class="icons__item" data-name="product_subscriptions">
<i class="eos-icons">
product_subscriptions
</i>
<br>
product_subscriptions
</div>
<div class="icons__item" data-name="products">
<i class="eos-icons">
products
</i>
<br>
products
</div>
<div class="icons__item" data-name="project">
<i class="eos-icons">
project
</i>
<br>
project
</div>
<div class="icons__item" data-name="proxy">
<i class="eos-icons">
proxy
</i>
<br>
proxy
</div>
<div class="icons__item" data-name="pull_request">
<i class="eos-icons">
pull_request
</i>
<br>
pull_request
</div>
<div class="icons__item" data-name="push_pin">
<i class="eos-icons">
push_pin
</i>
<br>
push_pin
</div>
<div class="icons__item" data-name="quota">
<i class="eos-icons">
quota
</i>
<br>
quota
</div>
<div class="icons__item" data-name="replica_set">
<i class="eos-icons">
replica_set
</i>
<br>
replica_set
</div>
<div class="icons__item" data-name="replica">
<i class="eos-icons">
replica
</i>
<br>
replica
</div>
<div class="icons__item" data-name="repositories">
<i class="eos-icons">
repositories
</i>
<br>
repositories
</div>
<div class="icons__item" data-name="role_binding">
<i class="eos-icons">
role_binding
</i>
<br>
role_binding
</div>
<div class="icons__item" data-name="route">
<i class="eos-icons">
route
</i>
<br>
route
</div>
<div class="icons__item" data-name="sandbox">
<i class="eos-icons">
sandbox
</i>
<br>
sandbox
</div>
<div class="icons__item" data-name="satellite_alt">
<i class="eos-icons">
satellite_alt
</i>
<br>
satellite_alt
</div>
<div class="icons__item" data-name="science">
<i class="eos-icons">
science
</i>
<br>
science
</div>
<div class="icons__item" data-name="scientist">
<i class="eos-icons">
scientist
</i>
<br>
scientist
</div>
<div class="icons__item" data-name="secret">
<i class="eos-icons">
secret
</i>
<br>
secret
</div>
<div class="icons__item" data-name="secure_data">
<i class="eos-icons">
secure_data
</i>
<br>
secure_data
</div>
<div class="icons__item" data-name="self_healing">
<i class="eos-icons">
self_healing
</i>
<br>
self_healing
</div>
<div class="icons__item" data-name="service_instance">
<i class="eos-icons">
service_instance
</i>
<br>
service_instance
</div>
<div class="icons__item" data-name="service_plan">
<i class="eos-icons">
service_plan
</i>
<br>
service_plan
</div>
<div class="icons__item" data-name="service">
<i class="eos-icons">
service
</i>
<br>
service
</div>
<div class="icons__item" data-name="snapshot_rollback">
<i class="eos-icons">
snapshot_rollback
</i>
<br>
snapshot_rollback
</div>
<div class="icons__item" data-name="software">
<i class="eos-icons">
software
</i>
<br>
software
</div>
<div class="icons__item" data-name="spinner">
<i class="eos-icons">
spinner
</i>
<br>
spinner
</div>
<div class="icons__item" data-name="state">
<i class="eos-icons">
state
</i>
<br>
state
</div>
<div class="icons__item" data-name="stateful_set">
<i class="eos-icons">
stateful_set
</i>
<br>
stateful_set
</div>
<div class="icons__item" data-name="storage_class">
<i class="eos-icons">
storage_class
</i>
<br>
storage_class
</div>
<div class="icons__item" data-name="subscription_management">
<i class="eos-icons">
subscription_management
</i>
<br>
subscription_management
</div>
<div class="icons__item" data-name="subscriptions_created">
<i class="eos-icons">
subscriptions_created
</i>
<br>
subscriptions_created
</div>
<div class="icons__item" data-name="symlink">
<i class="eos-icons">
symlink
</i>
<br>
symlink
</div>
<div class="icons__item" data-name="system_group">
<i class="eos-icons">
system_group
</i>
<br>
system_group
</div>
<div class="icons__item" data-name="system_image">
<i class="eos-icons">
system_image
</i>
<br>
system_image
</div>
<div class="icons__item" data-name="system_ok">
<i class="eos-icons">
system_ok
</i>
<br>
system_ok
</div>
<div class="icons__item" data-name="system_re_registered">
<i class="eos-icons">
system_re_registered
</i>
<br>
system_re_registered
</div>
<div class="icons__item" data-name="system_warning">
<i class="eos-icons">
system_warning
</i>
<br>
system_warning
</div>
<div class="icons__item" data-name="templates">
<i class="eos-icons">
templates
</i>
<br>
templates
</div>
<div class="icons__item" data-name="terminal">
<i class="eos-icons">
terminal
</i>
<br>
terminal
</div>
<div class="icons__item" data-name="test_tube">
<i class="eos-icons">
test_tube
</i>
<br>
test_tube
</div>
<div class="icons__item" data-name="timeout">
<i class="eos-icons">
timeout
</i>
<br>
timeout
</div>
<div class="icons__item" data-name="troubleshooting">
<i class="eos-icons">
troubleshooting
</i>
<br>
troubleshooting
</div>
<div class="icons__item" data-name="trusted_organization">
<i class="eos-icons">
trusted_organization
</i>
<br>
trusted_organization
</div>
<div class="icons__item" data-name="virtual_guest">
<i class="eos-icons">
virtual_guest
</i>
<br>
virtual_guest
</div>
<div class="icons__item" data-name="virtual_host_manager">
<i class="eos-icons">
virtual_host_manager
</i>
<br>
virtual_host_manager
</div>
<div class="icons__item" data-name="virtual_reality">
<i class="eos-icons">
virtual_reality
</i>
<br>
virtual_reality
</div>
<div class="icons__item" data-name="virtual_space">
<i class="eos-icons">
virtual_space
</i>
<br>
virtual_space
</div>
<div class="icons__item" data-name="volume_binding">
<i class="eos-icons">
volume_binding
</i>
<br>
volume_binding
</div>
<div class="icons__item" data-name="volume">
<i class="eos-icons">
volume
</i>
<br>
volume
</div>
<div class="icons__item" data-name="workload">
<i class="eos-icons">
workload
</i>
<br>
workload
</div>
<div class="icons__item" data-name="10k">
<i class="eos-icons">
10k
</i>
<br>
10k
</div>
<div class="icons__item" data-name="10mp">
<i class="eos-icons">
10mp
</i>
<br>
10mp
</div>
<div class="icons__item" data-name="11mp">
<i class="eos-icons">
11mp
</i>
<br>
11mp
</div>
<div class="icons__item" data-name="123">
<i class="eos-icons">
123
</i>
<br>
123
</div>
<div class="icons__item" data-name="12mp">
<i class="eos-icons">
12mp
</i>
<br>
12mp
</div>
<div class="icons__item" data-name="13mp">
<i class="eos-icons">
13mp
</i>
<br>
13mp
</div>
<div class="icons__item" data-name="14mp">
<i class="eos-icons">
14mp
</i>
<br>
14mp
</div>
<div class="icons__item" data-name="15mp">
<i class="eos-icons">
15mp
</i>
<br>
15mp
</div>
<div class="icons__item" data-name="16mp">
<i class="eos-icons">
16mp
</i>
<br>
16mp
</div>
<div class="icons__item" data-name="17mp">
<i class="eos-icons">
17mp
</i>
<br>
17mp
</div>
<div class="icons__item" data-name="18mp">
<i class="eos-icons">
18mp
</i>
<br>
18mp
</div>
<div class="icons__item" data-name="19mp">
<i class="eos-icons">
19mp
</i>
<br>
19mp
</div>
<div class="icons__item" data-name="1k_plus">
<i class="eos-icons">
1k_plus
</i>
<br>
1k_plus
</div>
<div class="icons__item" data-name="1k">
<i class="eos-icons">
1k
</i>
<br>
1k
</div>
<div class="icons__item" data-name="1x_mobiledata">
<i class="eos-icons">
1x_mobiledata
</i>
<br>
1x_mobiledata
</div>
<div class="icons__item" data-name="20mp">
<i class="eos-icons">
20mp
</i>
<br>
20mp
</div>
<div class="icons__item" data-name="21mp">
<i class="eos-icons">
21mp
</i>
<br>
21mp
</div>
<div class="icons__item" data-name="22mp">
<i class="eos-icons">
22mp
</i>
<br>
22mp
</div>
<div class="icons__item" data-name="23mp">
<i class="eos-icons">
23mp
</i>
<br>
23mp
</div>
<div class="icons__item" data-name="24mp">
<i class="eos-icons">
24mp
</i>
<br>
24mp
</div>
<div class="icons__item" data-name="2k_plus">
<i class="eos-icons">
2k_plus
</i>
<br>
2k_plus
</div>
<div class="icons__item" data-name="2k">
<i class="eos-icons">
2k
</i>
<br>
2k
</div>
<div class="icons__item" data-name="2mp">
<i class="eos-icons">
2mp
</i>
<br>
2mp
</div>
<div class="icons__item" data-name="30fps_select">
<i class="eos-icons">
30fps_select
</i>
<br>
30fps_select
</div>
<div class="icons__item" data-name="30fps">
<i class="eos-icons">
30fps
</i>
<br>
30fps
</div>
<div class="icons__item" data-name="360">
<i class="eos-icons">
360
</i>
<br>
360
</div>
<div class="icons__item" data-name="3d_rotation">
<i class="eos-icons">
3d_rotation
</i>
<br>
3d_rotation
</div>
<div class="icons__item" data-name="3g_mobiledata">
<i class="eos-icons">
3g_mobiledata
</i>
<br>
3g_mobiledata
</div>
<div class="icons__item" data-name="3k_plus">
<i class="eos-icons">
3k_plus
</i>
<br>
3k_plus
</div>
<div class="icons__item" data-name="3k">
<i class="eos-icons">
3k
</i>
<br>
3k
</div>
<div class="icons__item" data-name="3mp">
<i class="eos-icons">
3mp
</i>
<br>
3mp
</div>
<div class="icons__item" data-name="3p">
<i class="eos-icons">
3p
</i>
<br>
3p
</div>
<div class="icons__item" data-name="4g_mobiledata">
<i class="eos-icons">
4g_mobiledata
</i>
<br>
4g_mobiledata
</div>
<div class="icons__item" data-name="4g_plus_mobiledata">
<i class="eos-icons">
4g_plus_mobiledata
</i>
<br>
4g_plus_mobiledata
</div>
<div class="icons__item" data-name="4k_plus">
<i class="eos-icons">
4k_plus
</i>
<br>
4k_plus
</div>
<div class="icons__item" data-name="4k">
<i class="eos-icons">
4k
</i>
<br>
4k
</div>
<div class="icons__item" data-name="4mp">
<i class="eos-icons">
4mp
</i>
<br>
4mp
</div>
<div class="icons__item" data-name="5g">
<i class="eos-icons">
5g
</i>
<br>
5g
</div>
<div class="icons__item" data-name="5k_plus">
<i class="eos-icons">
5k_plus
</i>
<br>
5k_plus
</div>
<div class="icons__item" data-name="5k">
<i class="eos-icons">
5k
</i>
<br>
5k
</div>
<div class="icons__item" data-name="5mp">
<i class="eos-icons">
5mp
</i>
<br>
5mp
</div>
<div class="icons__item" data-name="6_ft_apart">
<i class="eos-icons">
6_ft_apart
</i>
<br>
6_ft_apart
</div>
<div class="icons__item" data-name="60fps_select">
<i class="eos-icons">
60fps_select
</i>
<br>
60fps_select
</div>
<div class="icons__item" data-name="60fps">
<i class="eos-icons">
60fps
</i>
<br>
60fps
</div>
<div class="icons__item" data-name="6k_plus">
<i class="eos-icons">
6k_plus
</i>
<br>
6k_plus
</div>
<div class="icons__item" data-name="6k">
<i class="eos-icons">
6k
</i>
<br>
6k
</div>
<div class="icons__item" data-name="6mp">
<i class="eos-icons">
6mp
</i>
<br>
6mp
</div>
<div class="icons__item" data-name="7k_plus">
<i class="eos-icons">
7k_plus
</i>
<br>
7k_plus
</div>
<div class="icons__item" data-name="7k">
<i class="eos-icons">
7k
</i>
<br>
7k
</div>
<div class="icons__item" data-name="7mp">
<i class="eos-icons">
7mp
</i>
<br>
7mp
</div>
<div class="icons__item" data-name="8k_plus">
<i class="eos-icons">
8k_plus
</i>
<br>
8k_plus
</div>
<div class="icons__item" data-name="8k">
<i class="eos-icons">
8k
</i>
<br>
8k
</div>
<div class="icons__item" data-name="8mp">
<i class="eos-icons">
8mp
</i>
<br>
8mp
</div>
<div class="icons__item" data-name="9k_plus">
<i class="eos-icons">
9k_plus
</i>
<br>
9k_plus
</div>
<div class="icons__item" data-name="9k">
<i class="eos-icons">
9k
</i>
<br>
9k
</div>
<div class="icons__item" data-name="9mp">
<i class="eos-icons">
9mp
</i>
<br>
9mp
</div>
<div class="icons__item" data-name="abc">
<i class="eos-icons">
abc
</i>
<br>
abc
</div>
<div class="icons__item" data-name="ac_unit">
<i class="eos-icons">
ac_unit
</i>
<br>
ac_unit
</div>
<div class="icons__item" data-name="access_alarm">
<i class="eos-icons">
access_alarm
</i>
<br>
access_alarm
</div>
<div class="icons__item" data-name="accessibility_new">
<i class="eos-icons">
accessibility_new
</i>
<br>
accessibility_new
</div>
<div class="icons__item" data-name="accessibility">
<i class="eos-icons">
accessibility
</i>
<br>
accessibility
</div>
<div class="icons__item" data-name="accessible_forward">
<i class="eos-icons">
accessible_forward
</i>
<br>
accessible_forward
</div>
<div class="icons__item" data-name="accessible">
<i class="eos-icons">
accessible
</i>
<br>
accessible
</div>
<div class="icons__item" data-name="account_balance_wallet">
<i class="eos-icons">
account_balance_wallet
</i>
<br>
account_balance_wallet
</div>
<div class="icons__item" data-name="account_balance">
<i class="eos-icons">
account_balance
</i>
<br>
account_balance
</div>
<div class="icons__item" data-name="account_box">
<i class="eos-icons">
account_box
</i>
<br>
account_box
</div>
<div class="icons__item" data-name="account_circle">
<i class="eos-icons">
account_circle
</i>
<br>
account_circle
</div>
<div class="icons__item" data-name="account_tree">
<i class="eos-icons">
account_tree
</i>
<br>
account_tree
</div>
<div class="icons__item" data-name="ad_units">
<i class="eos-icons">
ad_units
</i>
<br>
ad_units
</div>
<div class="icons__item" data-name="adb">
<i class="eos-icons">
adb
</i>
<br>
adb
</div>
<div class="icons__item" data-name="add_a_photo">
<i class="eos-icons">
add_a_photo
</i>
<br>
add_a_photo
</div>
<div class="icons__item" data-name="add_alarm">
<i class="eos-icons">
add_alarm
</i>
<br>
add_alarm
</div>
<div class="icons__item" data-name="add_alert">
<i class="eos-icons">
add_alert
</i>
<br>
add_alert
</div>
<div class="icons__item" data-name="add_box">
<i class="eos-icons">
add_box
</i>
<br>
add_box
</div>
<div class="icons__item" data-name="add_business">
<i class="eos-icons">
add_business
</i>
<br>
add_business
</div>
<div class="icons__item" data-name="add_card">
<i class="eos-icons">
add_card
</i>
<br>
add_card
</div>
<div class="icons__item" data-name="add_chart">
<i class="eos-icons">
add_chart
</i>
<br>
add_chart
</div>
<div class="icons__item" data-name="add_circle">
<i class="eos-icons">
add_circle
</i>
<br>
add_circle
</div>
<div class="icons__item" data-name="add_comment">
<i class="eos-icons">
add_comment
</i>
<br>
add_comment
</div>
<div class="icons__item" data-name="add_ic_call">
<i class="eos-icons">
add_ic_call
</i>
<br>
add_ic_call
</div>
<div class="icons__item" data-name="add_link">