TelegramPWA/src/styles/icons/preview.html
2026-04-27 14:29:09 +02:00

1783 lines
58 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>icons Preview</title>
<link rel="stylesheet" href="../icons.css?b5b099df263806a8c2658778f26c60c9">
<style>
:root {
color-scheme: light;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #f3f5f8;
color: #111827;
}
.page {
width: min(100%, 96rem);
margin: 0 auto;
padding: 2rem;
}
.header {
margin-bottom: 2rem;
}
.title {
margin: 0;
font-size: 2rem;
line-height: 1.2;
}
.subtitle {
margin: 0.5rem 0 0;
color: #4b5563;
font-size: 1rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
gap: 1rem;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border: 1px solid #d7dde6;
border-radius: 0.75rem;
background: #fff;
text-align: center;
}
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-family: "icons";
font-style: normal;
font-weight: normal;
font-size: 1.5rem;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.name {
font-size: 0.875rem;
line-height: 1.3;
word-break: break-word;
}
.code {
color: #6b7280;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 0.75rem;
}
</style>
</head>
<body>
<main class="page">
<header class="header">
<h1 class="title">icons Preview</h1>
<p class="subtitle">336 icons</p>
</header>
<section class="grid">
<article class="card">
<i class="icon icon-active-sessions"></i>
<div class="name">active-sessions</div>
<div class="code">\f101</div>
</article>
<article class="card">
<i class="icon icon-add"></i>
<div class="name">add</div>
<div class="code">\f102</div>
</article>
<article class="card">
<i class="icon icon-add-caption"></i>
<div class="name">add-caption</div>
<div class="code">\f103</div>
</article>
<article class="card">
<i class="icon icon-add-filled"></i>
<div class="name">add-filled</div>
<div class="code">\f104</div>
</article>
<article class="card">
<i class="icon icon-add-one-badge"></i>
<div class="name">add-one-badge</div>
<div class="code">\f105</div>
</article>
<article class="card">
<i class="icon icon-add-user"></i>
<div class="name">add-user</div>
<div class="code">\f106</div>
</article>
<article class="card">
<i class="icon icon-add-user-filled"></i>
<div class="name">add-user-filled</div>
<div class="code">\f107</div>
</article>
<article class="card">
<i class="icon icon-admin"></i>
<div class="name">admin</div>
<div class="code">\f108</div>
</article>
<article class="card">
<i class="icon icon-ai"></i>
<div class="name">ai</div>
<div class="code">\f109</div>
</article>
<article class="card">
<i class="icon icon-ai-edit"></i>
<div class="name">ai-edit</div>
<div class="code">\f10a</div>
</article>
<article class="card">
<i class="icon icon-ai-fix"></i>
<div class="name">ai-fix</div>
<div class="code">\f10b</div>
</article>
<article class="card">
<i class="icon icon-allow-share"></i>
<div class="name">allow-share</div>
<div class="code">\f10c</div>
</article>
<article class="card">
<i class="icon icon-allow-speak"></i>
<div class="name">allow-speak</div>
<div class="code">\f10d</div>
</article>
<article class="card">
<i class="icon icon-animals"></i>
<div class="name">animals</div>
<div class="code">\f10e</div>
</article>
<article class="card">
<i class="icon icon-animations"></i>
<div class="name">animations</div>
<div class="code">\f10f</div>
</article>
<article class="card">
<i class="icon icon-archive"></i>
<div class="name">archive</div>
<div class="code">\f110</div>
</article>
<article class="card">
<i class="icon icon-archive-filled"></i>
<div class="name">archive-filled</div>
<div class="code">\f111</div>
</article>
<article class="card">
<i class="icon icon-archive-from-main"></i>
<div class="name">archive-from-main</div>
<div class="code">\f112</div>
</article>
<article class="card">
<i class="icon icon-archive-to-main"></i>
<div class="name">archive-to-main</div>
<div class="code">\f113</div>
</article>
<article class="card">
<i class="icon icon-arrow-down"></i>
<div class="name">arrow-down</div>
<div class="code">\f114</div>
</article>
<article class="card">
<i class="icon icon-arrow-down-circle"></i>
<div class="name">arrow-down-circle</div>
<div class="code">\f115</div>
</article>
<article class="card">
<i class="icon icon-arrow-left"></i>
<div class="name">arrow-left</div>
<div class="code">\f116</div>
</article>
<article class="card">
<i class="icon icon-arrow-right"></i>
<div class="name">arrow-right</div>
<div class="code">\f117</div>
</article>
<article class="card">
<i class="icon icon-ask-support"></i>
<div class="name">ask-support</div>
<div class="code">\f118</div>
</article>
<article class="card">
<i class="icon icon-attach"></i>
<div class="name">attach</div>
<div class="code">\f119</div>
</article>
<article class="card">
<i class="icon icon-auction"></i>
<div class="name">auction</div>
<div class="code">\f11a</div>
</article>
<article class="card">
<i class="icon icon-auction-drop"></i>
<div class="name">auction-drop</div>
<div class="code">\f11b</div>
</article>
<article class="card">
<i class="icon icon-auction-filled"></i>
<div class="name">auction-filled</div>
<div class="code">\f11c</div>
</article>
<article class="card">
<i class="icon icon-auction-next-round"></i>
<div class="name">auction-next-round</div>
<div class="code">\f11d</div>
</article>
<article class="card">
<i class="icon icon-author-hidden"></i>
<div class="name">author-hidden</div>
<div class="code">\f11e</div>
</article>
<article class="card">
<i class="icon icon-avatar-archived-chats"></i>
<div class="name">avatar-archived-chats</div>
<div class="code">\f11f</div>
</article>
<article class="card">
<i class="icon icon-avatar-deleted-account"></i>
<div class="name">avatar-deleted-account</div>
<div class="code">\f120</div>
</article>
<article class="card">
<i class="icon icon-avatar-saved-messages"></i>
<div class="name">avatar-saved-messages</div>
<div class="code">\f121</div>
</article>
<article class="card">
<i class="icon icon-bold"></i>
<div class="name">bold</div>
<div class="code">\f122</div>
</article>
<article class="card">
<i class="icon icon-boost"></i>
<div class="name">boost</div>
<div class="code">\f123</div>
</article>
<article class="card">
<i class="icon icon-boost-craft-chance"></i>
<div class="name">boost-craft-chance</div>
<div class="code">\f124</div>
</article>
<article class="card">
<i class="icon icon-boost-outline"></i>
<div class="name">boost-outline</div>
<div class="code">\f125</div>
</article>
<article class="card">
<i class="icon icon-boostcircle"></i>
<div class="name">boostcircle</div>
<div class="code">\f126</div>
</article>
<article class="card">
<i class="icon icon-boosts"></i>
<div class="name">boosts</div>
<div class="code">\f127</div>
</article>
<article class="card">
<i class="icon icon-bot-command"></i>
<div class="name">bot-command</div>
<div class="code">\f128</div>
</article>
<article class="card">
<i class="icon icon-bot-commands-filled"></i>
<div class="name">bot-commands-filled</div>
<div class="code">\f129</div>
</article>
<article class="card">
<i class="icon icon-bots"></i>
<div class="name">bots</div>
<div class="code">\f12a</div>
</article>
<article class="card">
<i class="icon icon-brush"></i>
<div class="name">brush</div>
<div class="code">\f12b</div>
</article>
<article class="card">
<i class="icon icon-bug"></i>
<div class="name">bug</div>
<div class="code">\f12c</div>
</article>
<article class="card">
<i class="icon icon-calendar"></i>
<div class="name">calendar</div>
<div class="code">\f12d</div>
</article>
<article class="card">
<i class="icon icon-calendar-filter"></i>
<div class="name">calendar-filter</div>
<div class="code">\f12e</div>
</article>
<article class="card">
<i class="icon icon-camera"></i>
<div class="name">camera</div>
<div class="code">\f12f</div>
</article>
<article class="card">
<i class="icon icon-camera-add"></i>
<div class="name">camera-add</div>
<div class="code">\f130</div>
</article>
<article class="card">
<i class="icon icon-car"></i>
<div class="name">car</div>
<div class="code">\f131</div>
</article>
<article class="card">
<i class="icon icon-card"></i>
<div class="name">card</div>
<div class="code">\f132</div>
</article>
<article class="card">
<i class="icon icon-cash-circle"></i>
<div class="name">cash-circle</div>
<div class="code">\f133</div>
</article>
<article class="card">
<i class="icon icon-channel"></i>
<div class="name">channel</div>
<div class="code">\f134</div>
</article>
<article class="card">
<i class="icon icon-channel-filled"></i>
<div class="name">channel-filled</div>
<div class="code">\f135</div>
</article>
<article class="card">
<i class="icon icon-channelviews"></i>
<div class="name">channelviews</div>
<div class="code">\f136</div>
</article>
<article class="card">
<i class="icon icon-chat-badge"></i>
<div class="name">chat-badge</div>
<div class="code">\f137</div>
</article>
<article class="card">
<i class="icon icon-chats-badge"></i>
<div class="name">chats-badge</div>
<div class="code">\f138</div>
</article>
<article class="card">
<i class="icon icon-check"></i>
<div class="name">check</div>
<div class="code">\f139</div>
</article>
<article class="card">
<i class="icon icon-check-bold"></i>
<div class="name">check-bold</div>
<div class="code">\f13a</div>
</article>
<article class="card">
<i class="icon icon-clock"></i>
<div class="name">clock</div>
<div class="code">\f13b</div>
</article>
<article class="card">
<i class="icon icon-clock-edit"></i>
<div class="name">clock-edit</div>
<div class="code">\f13c</div>
</article>
<article class="card">
<i class="icon icon-close"></i>
<div class="name">close</div>
<div class="code">\f13d</div>
</article>
<article class="card">
<i class="icon icon-close-circle"></i>
<div class="name">close-circle</div>
<div class="code">\f13e</div>
</article>
<article class="card">
<i class="icon icon-close-topic"></i>
<div class="name">close-topic</div>
<div class="code">\f13f</div>
</article>
<article class="card">
<i class="icon icon-closed-gift"></i>
<div class="name">closed-gift</div>
<div class="code">\f140</div>
</article>
<article class="card">
<i class="icon icon-cloud-download"></i>
<div class="name">cloud-download</div>
<div class="code">\f141</div>
</article>
<article class="card">
<i class="icon icon-collapse"></i>
<div class="name">collapse</div>
<div class="code">\f142</div>
</article>
<article class="card">
<i class="icon icon-collapse-modal"></i>
<div class="name">collapse-modal</div>
<div class="code">\f143</div>
</article>
<article class="card">
<i class="icon icon-colorize"></i>
<div class="name">colorize</div>
<div class="code">\f144</div>
</article>
<article class="card">
<i class="icon icon-combine-craft"></i>
<div class="name">combine-craft</div>
<div class="code">\f145</div>
</article>
<article class="card">
<i class="icon icon-comments"></i>
<div class="name">comments</div>
<div class="code">\f146</div>
</article>
<article class="card">
<i class="icon icon-comments-sticker"></i>
<div class="name">comments-sticker</div>
<div class="code">\f147</div>
</article>
<article class="card">
<i class="icon icon-copy"></i>
<div class="name">copy</div>
<div class="code">\f148</div>
</article>
<article class="card">
<i class="icon icon-copy-media"></i>
<div class="name">copy-media</div>
<div class="code">\f149</div>
</article>
<article class="card">
<i class="icon icon-craft"></i>
<div class="name">craft</div>
<div class="code">\f14a</div>
</article>
<article class="card">
<i class="icon icon-crop"></i>
<div class="name">crop</div>
<div class="code">\f14b</div>
</article>
<article class="card">
<i class="icon icon-crown-take-off"></i>
<div class="name">crown-take-off</div>
<div class="code">\f14c</div>
</article>
<article class="card">
<i class="icon icon-crown-take-off-outline"></i>
<div class="name">crown-take-off-outline</div>
<div class="code">\f14d</div>
</article>
<article class="card">
<i class="icon icon-crown-wear"></i>
<div class="name">crown-wear</div>
<div class="code">\f14e</div>
</article>
<article class="card">
<i class="icon icon-crown-wear-outline"></i>
<div class="name">crown-wear-outline</div>
<div class="code">\f14f</div>
</article>
<article class="card">
<i class="icon icon-darkmode"></i>
<div class="name">darkmode</div>
<div class="code">\f150</div>
</article>
<article class="card">
<i class="icon icon-data"></i>
<div class="name">data</div>
<div class="code">\f151</div>
</article>
<article class="card">
<i class="icon icon-delete"></i>
<div class="name">delete</div>
<div class="code">\f152</div>
</article>
<article class="card">
<i class="icon icon-delete-filled"></i>
<div class="name">delete-filled</div>
<div class="code">\f153</div>
</article>
<article class="card">
<i class="icon icon-delete-left"></i>
<div class="name">delete-left</div>
<div class="code">\f154</div>
</article>
<article class="card">
<i class="icon icon-delete-user"></i>
<div class="name">delete-user</div>
<div class="code">\f155</div>
</article>
<article class="card">
<i class="icon icon-diamond"></i>
<div class="name">diamond</div>
<div class="code">\f156</div>
</article>
<article class="card">
<i class="icon icon-document"></i>
<div class="name">document</div>
<div class="code">\f157</div>
</article>
<article class="card">
<i class="icon icon-double-badge"></i>
<div class="name">double-badge</div>
<div class="code">\f158</div>
</article>
<article class="card">
<i class="icon icon-down"></i>
<div class="name">down</div>
<div class="code">\f159</div>
</article>
<article class="card">
<i class="icon icon-download"></i>
<div class="name">download</div>
<div class="code">\f15a</div>
</article>
<article class="card">
<i class="icon icon-dropdown-arrows"></i>
<div class="name">dropdown-arrows</div>
<div class="code">\f15b</div>
</article>
<article class="card">
<i class="icon icon-eats"></i>
<div class="name">eats</div>
<div class="code">\f15c</div>
</article>
<article class="card">
<i class="icon icon-edit"></i>
<div class="name">edit</div>
<div class="code">\f15d</div>
</article>
<article class="card">
<i class="icon icon-email"></i>
<div class="name">email</div>
<div class="code">\f15e</div>
</article>
<article class="card">
<i class="icon icon-enter"></i>
<div class="name">enter</div>
<div class="code">\f15f</div>
</article>
<article class="card">
<i class="icon icon-expand"></i>
<div class="name">expand</div>
<div class="code">\f160</div>
</article>
<article class="card">
<i class="icon icon-expand-modal"></i>
<div class="name">expand-modal</div>
<div class="code">\f161</div>
</article>
<article class="card">
<i class="icon icon-eye"></i>
<div class="name">eye</div>
<div class="code">\f162</div>
</article>
<article class="card">
<i class="icon icon-eye-crossed"></i>
<div class="name">eye-crossed</div>
<div class="code">\f163</div>
</article>
<article class="card">
<i class="icon icon-eye-crossed-outline"></i>
<div class="name">eye-crossed-outline</div>
<div class="code">\f164</div>
</article>
<article class="card">
<i class="icon icon-eye-outline"></i>
<div class="name">eye-outline</div>
<div class="code">\f165</div>
</article>
<article class="card">
<i class="icon icon-favorite"></i>
<div class="name">favorite</div>
<div class="code">\f166</div>
</article>
<article class="card">
<i class="icon icon-favorite-filled"></i>
<div class="name">favorite-filled</div>
<div class="code">\f167</div>
</article>
<article class="card">
<i class="icon icon-file-badge"></i>
<div class="name">file-badge</div>
<div class="code">\f168</div>
</article>
<article class="card">
<i class="icon icon-flag"></i>
<div class="name">flag</div>
<div class="code">\f169</div>
</article>
<article class="card">
<i class="icon icon-flip"></i>
<div class="name">flip</div>
<div class="code">\f16a</div>
</article>
<article class="card">
<i class="icon icon-folder"></i>
<div class="name">folder</div>
<div class="code">\f16b</div>
</article>
<article class="card">
<i class="icon icon-folder-badge"></i>
<div class="name">folder-badge</div>
<div class="code">\f16c</div>
</article>
<article class="card">
<i class="icon icon-folder-tabs-bot"></i>
<div class="name">folder-tabs-bot</div>
<div class="code">\f16d</div>
</article>
<article class="card">
<i class="icon icon-folder-tabs-channel"></i>
<div class="name">folder-tabs-channel</div>
<div class="code">\f16e</div>
</article>
<article class="card">
<i class="icon icon-folder-tabs-chat"></i>
<div class="name">folder-tabs-chat</div>
<div class="code">\f16f</div>
</article>
<article class="card">
<i class="icon icon-folder-tabs-chats"></i>
<div class="name">folder-tabs-chats</div>
<div class="code">\f170</div>
</article>
<article class="card">
<i class="icon icon-folder-tabs-folder"></i>
<div class="name">folder-tabs-folder</div>
<div class="code">\f171</div>
</article>
<article class="card">
<i class="icon icon-folder-tabs-group"></i>
<div class="name">folder-tabs-group</div>
<div class="code">\f172</div>
</article>
<article class="card">
<i class="icon icon-folder-tabs-star"></i>
<div class="name">folder-tabs-star</div>
<div class="code">\f173</div>
</article>
<article class="card">
<i class="icon icon-folder-tabs-user"></i>
<div class="name">folder-tabs-user</div>
<div class="code">\f174</div>
</article>
<article class="card">
<i class="icon icon-fontsize"></i>
<div class="name">fontsize</div>
<div class="code">\f175</div>
</article>
<article class="card">
<i class="icon icon-forums"></i>
<div class="name">forums</div>
<div class="code">\f176</div>
</article>
<article class="card">
<i class="icon icon-forward"></i>
<div class="name">forward</div>
<div class="code">\f177</div>
</article>
<article class="card">
<i class="icon icon-fragment"></i>
<div class="name">fragment</div>
<div class="code">\f178</div>
</article>
<article class="card">
<i class="icon icon-frozen-time"></i>
<div class="name">frozen-time</div>
<div class="code">\f179</div>
</article>
<article class="card">
<i class="icon icon-fullscreen"></i>
<div class="name">fullscreen</div>
<div class="code">\f17a</div>
</article>
<article class="card">
<i class="icon icon-gifs"></i>
<div class="name">gifs</div>
<div class="code">\f17b</div>
</article>
<article class="card">
<i class="icon icon-gift"></i>
<div class="name">gift</div>
<div class="code">\f17c</div>
</article>
<article class="card">
<i class="icon icon-gift-transfer-inline"></i>
<div class="name">gift-transfer-inline</div>
<div class="code">\f17d</div>
</article>
<article class="card">
<i class="icon icon-group"></i>
<div class="name">group</div>
<div class="code">\f17e</div>
</article>
<article class="card">
<i class="icon icon-group-filled"></i>
<div class="name">group-filled</div>
<div class="code">\f17f</div>
</article>
<article class="card">
<i class="icon icon-grouped"></i>
<div class="name">grouped</div>
<div class="code">\f180</div>
</article>
<article class="card">
<i class="icon icon-grouped-disable"></i>
<div class="name">grouped-disable</div>
<div class="code">\f181</div>
</article>
<article class="card">
<i class="icon icon-hand-stop"></i>
<div class="name">hand-stop</div>
<div class="code">\f182</div>
</article>
<article class="card">
<i class="icon icon-hand-stop-filled"></i>
<div class="name">hand-stop-filled</div>
<div class="code">\f183</div>
</article>
<article class="card">
<i class="icon icon-hashtag"></i>
<div class="name">hashtag</div>
<div class="code">\f184</div>
</article>
<article class="card">
<i class="icon icon-hd-photo"></i>
<div class="name">hd-photo</div>
<div class="code">\f185</div>
</article>
<article class="card">
<i class="icon icon-heart"></i>
<div class="name">heart</div>
<div class="code">\f186</div>
</article>
<article class="card">
<i class="icon icon-heart-outline"></i>
<div class="name">heart-outline</div>
<div class="code">\f187</div>
</article>
<article class="card">
<i class="icon icon-help"></i>
<div class="name">help</div>
<div class="code">\f188</div>
</article>
<article class="card">
<i class="icon icon-info"></i>
<div class="name">info</div>
<div class="code">\f189</div>
</article>
<article class="card">
<i class="icon icon-info-filled"></i>
<div class="name">info-filled</div>
<div class="code">\f18a</div>
</article>
<article class="card">
<i class="icon icon-install"></i>
<div class="name">install</div>
<div class="code">\f18b</div>
</article>
<article class="card">
<i class="icon icon-italic"></i>
<div class="name">italic</div>
<div class="code">\f18c</div>
</article>
<article class="card">
<i class="icon icon-key"></i>
<div class="name">key</div>
<div class="code">\f18d</div>
</article>
<article class="card">
<i class="icon icon-keyboard"></i>
<div class="name">keyboard</div>
<div class="code">\f18e</div>
</article>
<article class="card">
<i class="icon icon-lamp"></i>
<div class="name">lamp</div>
<div class="code">\f18f</div>
</article>
<article class="card">
<i class="icon icon-language"></i>
<div class="name">language</div>
<div class="code">\f190</div>
</article>
<article class="card">
<i class="icon icon-large-pause"></i>
<div class="name">large-pause</div>
<div class="code">\f191</div>
</article>
<article class="card">
<i class="icon icon-large-play"></i>
<div class="name">large-play</div>
<div class="code">\f192</div>
</article>
<article class="card">
<i class="icon icon-link"></i>
<div class="name">link</div>
<div class="code">\f193</div>
</article>
<article class="card">
<i class="icon icon-link-badge"></i>
<div class="name">link-badge</div>
<div class="code">\f194</div>
</article>
<article class="card">
<i class="icon icon-link-broken"></i>
<div class="name">link-broken</div>
<div class="code">\f195</div>
</article>
<article class="card">
<i class="icon icon-location"></i>
<div class="name">location</div>
<div class="code">\f196</div>
</article>
<article class="card">
<i class="icon icon-lock"></i>
<div class="name">lock</div>
<div class="code">\f197</div>
</article>
<article class="card">
<i class="icon icon-lock-badge"></i>
<div class="name">lock-badge</div>
<div class="code">\f198</div>
</article>
<article class="card">
<i class="icon icon-logout"></i>
<div class="name">logout</div>
<div class="code">\f199</div>
</article>
<article class="card">
<i class="icon icon-loop"></i>
<div class="name">loop</div>
<div class="code">\f19a</div>
</article>
<article class="card">
<i class="icon icon-mention"></i>
<div class="name">mention</div>
<div class="code">\f19b</div>
</article>
<article class="card">
<i class="icon icon-menu"></i>
<div class="name">menu</div>
<div class="code">\f19c</div>
</article>
<article class="card">
<i class="icon icon-message"></i>
<div class="name">message</div>
<div class="code">\f19d</div>
</article>
<article class="card">
<i class="icon icon-message-failed"></i>
<div class="name">message-failed</div>
<div class="code">\f19e</div>
</article>
<article class="card">
<i class="icon icon-message-pending"></i>
<div class="name">message-pending</div>
<div class="code">\f19f</div>
</article>
<article class="card">
<i class="icon icon-message-read"></i>
<div class="name">message-read</div>
<div class="code">\f1a0</div>
</article>
<article class="card">
<i class="icon icon-message-succeeded"></i>
<div class="name">message-succeeded</div>
<div class="code">\f1a1</div>
</article>
<article class="card">
<i class="icon icon-microphone"></i>
<div class="name">microphone</div>
<div class="code">\f1a2</div>
</article>
<article class="card">
<i class="icon icon-microphone-alt"></i>
<div class="name">microphone-alt</div>
<div class="code">\f1a3</div>
</article>
<article class="card">
<i class="icon icon-monospace"></i>
<div class="name">monospace</div>
<div class="code">\f1a4</div>
</article>
<article class="card">
<i class="icon icon-more"></i>
<div class="name">more</div>
<div class="code">\f1a5</div>
</article>
<article class="card">
<i class="icon icon-more-circle"></i>
<div class="name">more-circle</div>
<div class="code">\f1a6</div>
</article>
<article class="card">
<i class="icon icon-move-caption-down"></i>
<div class="name">move-caption-down</div>
<div class="code">\f1a7</div>
</article>
<article class="card">
<i class="icon icon-move-caption-up"></i>
<div class="name">move-caption-up</div>
<div class="code">\f1a8</div>
</article>
<article class="card">
<i class="icon icon-mute"></i>
<div class="name">mute</div>
<div class="code">\f1a9</div>
</article>
<article class="card">
<i class="icon icon-muted"></i>
<div class="name">muted</div>
<div class="code">\f1aa</div>
</article>
<article class="card">
<i class="icon icon-my-notes"></i>
<div class="name">my-notes</div>
<div class="code">\f1ab</div>
</article>
<article class="card">
<i class="icon icon-new-chat-filled"></i>
<div class="name">new-chat-filled</div>
<div class="code">\f1ac</div>
</article>
<article class="card">
<i class="icon icon-new-send"></i>
<div class="name">new-send</div>
<div class="code">\f1ad</div>
</article>
<article class="card">
<i class="icon icon-next"></i>
<div class="name">next</div>
<div class="code">\f1ae</div>
</article>
<article class="card">
<i class="icon icon-next-link"></i>
<div class="name">next-link</div>
<div class="code">\f1af</div>
</article>
<article class="card">
<i class="icon icon-no-download"></i>
<div class="name">no-download</div>
<div class="code">\f1b0</div>
</article>
<article class="card">
<i class="icon icon-no-share"></i>
<div class="name">no-share</div>
<div class="code">\f1b1</div>
</article>
<article class="card">
<i class="icon icon-nochannel"></i>
<div class="name">nochannel</div>
<div class="code">\f1b2</div>
</article>
<article class="card">
<i class="icon icon-noise-suppression"></i>
<div class="name">noise-suppression</div>
<div class="code">\f1b3</div>
</article>
<article class="card">
<i class="icon icon-non-contacts"></i>
<div class="name">non-contacts</div>
<div class="code">\f1b4</div>
</article>
<article class="card">
<i class="icon icon-note"></i>
<div class="name">note</div>
<div class="code">\f1b5</div>
</article>
<article class="card">
<i class="icon icon-one-filled"></i>
<div class="name">one-filled</div>
<div class="code">\f1b6</div>
</article>
<article class="card">
<i class="icon icon-open-in-new-tab"></i>
<div class="name">open-in-new-tab</div>
<div class="code">\f1b7</div>
</article>
<article class="card">
<i class="icon icon-password-off"></i>
<div class="name">password-off</div>
<div class="code">\f1b8</div>
</article>
<article class="card">
<i class="icon icon-pause"></i>
<div class="name">pause</div>
<div class="code">\f1b9</div>
</article>
<article class="card">
<i class="icon icon-permissions"></i>
<div class="name">permissions</div>
<div class="code">\f1ba</div>
</article>
<article class="card">
<i class="icon icon-phone"></i>
<div class="name">phone</div>
<div class="code">\f1bb</div>
</article>
<article class="card">
<i class="icon icon-phone-discard"></i>
<div class="name">phone-discard</div>
<div class="code">\f1bc</div>
</article>
<article class="card">
<i class="icon icon-phone-discard-outline"></i>
<div class="name">phone-discard-outline</div>
<div class="code">\f1bd</div>
</article>
<article class="card">
<i class="icon icon-photo"></i>
<div class="name">photo</div>
<div class="code">\f1be</div>
</article>
<article class="card">
<i class="icon icon-pin"></i>
<div class="name">pin</div>
<div class="code">\f1bf</div>
</article>
<article class="card">
<i class="icon icon-pin-badge"></i>
<div class="name">pin-badge</div>
<div class="code">\f1c0</div>
</article>
<article class="card">
<i class="icon icon-pin-list"></i>
<div class="name">pin-list</div>
<div class="code">\f1c1</div>
</article>
<article class="card">
<i class="icon icon-pinned-chat"></i>
<div class="name">pinned-chat</div>
<div class="code">\f1c2</div>
</article>
<article class="card">
<i class="icon icon-pinned-message"></i>
<div class="name">pinned-message</div>
<div class="code">\f1c3</div>
</article>
<article class="card">
<i class="icon icon-pip"></i>
<div class="name">pip</div>
<div class="code">\f1c4</div>
</article>
<article class="card">
<i class="icon icon-play"></i>
<div class="name">play</div>
<div class="code">\f1c5</div>
</article>
<article class="card">
<i class="icon icon-play-story"></i>
<div class="name">play-story</div>
<div class="code">\f1c6</div>
</article>
<article class="card">
<i class="icon icon-poll"></i>
<div class="name">poll</div>
<div class="code">\f1c7</div>
</article>
<article class="card">
<i class="icon icon-poll-badge"></i>
<div class="name">poll-badge</div>
<div class="code">\f1c8</div>
</article>
<article class="card">
<i class="icon icon-previous"></i>
<div class="name">previous</div>
<div class="code">\f1c9</div>
</article>
<article class="card">
<i class="icon icon-previous-link"></i>
<div class="name">previous-link</div>
<div class="code">\f1ca</div>
</article>
<article class="card">
<i class="icon icon-privacy-policy"></i>
<div class="name">privacy-policy</div>
<div class="code">\f1cb</div>
</article>
<article class="card">
<i class="icon icon-proof-of-ownership"></i>
<div class="name">proof-of-ownership</div>
<div class="code">\f1cc</div>
</article>
<article class="card">
<i class="icon icon-quote"></i>
<div class="name">quote</div>
<div class="code">\f1cd</div>
</article>
<article class="card">
<i class="icon icon-quote-text"></i>
<div class="name">quote-text</div>
<div class="code">\f1ce</div>
</article>
<article class="card">
<i class="icon icon-radial-badge"></i>
<div class="name">radial-badge</div>
<div class="code">\f1cf</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level1"></i>
<div class="name">rating-icons-level1</div>
<div class="code">\f1d0</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level10"></i>
<div class="name">rating-icons-level10</div>
<div class="code">\f1d1</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level2"></i>
<div class="name">rating-icons-level2</div>
<div class="code">\f1d2</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level20"></i>
<div class="name">rating-icons-level20</div>
<div class="code">\f1d3</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level3"></i>
<div class="name">rating-icons-level3</div>
<div class="code">\f1d4</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level30"></i>
<div class="name">rating-icons-level30</div>
<div class="code">\f1d5</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level4"></i>
<div class="name">rating-icons-level4</div>
<div class="code">\f1d6</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level40"></i>
<div class="name">rating-icons-level40</div>
<div class="code">\f1d7</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level5"></i>
<div class="name">rating-icons-level5</div>
<div class="code">\f1d8</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level50"></i>
<div class="name">rating-icons-level50</div>
<div class="code">\f1d9</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level6"></i>
<div class="name">rating-icons-level6</div>
<div class="code">\f1da</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level60"></i>
<div class="name">rating-icons-level60</div>
<div class="code">\f1db</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level7"></i>
<div class="name">rating-icons-level7</div>
<div class="code">\f1dc</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level70"></i>
<div class="name">rating-icons-level70</div>
<div class="code">\f1dd</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level8"></i>
<div class="name">rating-icons-level8</div>
<div class="code">\f1de</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level80"></i>
<div class="name">rating-icons-level80</div>
<div class="code">\f1df</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level9"></i>
<div class="name">rating-icons-level9</div>
<div class="code">\f1e0</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-level90"></i>
<div class="name">rating-icons-level90</div>
<div class="code">\f1e1</div>
</article>
<article class="card">
<i class="icon icon-rating-icons-negative"></i>
<div class="name">rating-icons-negative</div>
<div class="code">\f1e2</div>
</article>
<article class="card">
<i class="icon icon-readchats"></i>
<div class="name">readchats</div>
<div class="code">\f1e3</div>
</article>
<article class="card">
<i class="icon icon-recent"></i>
<div class="name">recent</div>
<div class="code">\f1e4</div>
</article>
<article class="card">
<i class="icon icon-redo"></i>
<div class="name">redo</div>
<div class="code">\f1e5</div>
</article>
<article class="card">
<i class="icon icon-refund"></i>
<div class="name">refund</div>
<div class="code">\f1e6</div>
</article>
<article class="card">
<i class="icon icon-reload"></i>
<div class="name">reload</div>
<div class="code">\f1e7</div>
</article>
<article class="card">
<i class="icon icon-remove"></i>
<div class="name">remove</div>
<div class="code">\f1e8</div>
</article>
<article class="card">
<i class="icon icon-remove-quote"></i>
<div class="name">remove-quote</div>
<div class="code">\f1e9</div>
</article>
<article class="card">
<i class="icon icon-reopen-topic"></i>
<div class="name">reopen-topic</div>
<div class="code">\f1ea</div>
</article>
<article class="card">
<i class="icon icon-reorder-tabs"></i>
<div class="name">reorder-tabs</div>
<div class="code">\f1eb</div>
</article>
<article class="card">
<i class="icon icon-replace"></i>
<div class="name">replace</div>
<div class="code">\f1ec</div>
</article>
<article class="card">
<i class="icon icon-replies"></i>
<div class="name">replies</div>
<div class="code">\f1ed</div>
</article>
<article class="card">
<i class="icon icon-reply"></i>
<div class="name">reply</div>
<div class="code">\f1ee</div>
</article>
<article class="card">
<i class="icon icon-reply-filled"></i>
<div class="name">reply-filled</div>
<div class="code">\f1ef</div>
</article>
<article class="card">
<i class="icon icon-revenue-split"></i>
<div class="name">revenue-split</div>
<div class="code">\f1f0</div>
</article>
<article class="card">
<i class="icon icon-revote"></i>
<div class="name">revote</div>
<div class="code">\f1f1</div>
</article>
<article class="card">
<i class="icon icon-rotate"></i>
<div class="name">rotate</div>
<div class="code">\f1f2</div>
</article>
<article class="card">
<i class="icon icon-save-story"></i>
<div class="name">save-story</div>
<div class="code">\f1f3</div>
</article>
<article class="card">
<i class="icon icon-saved-messages"></i>
<div class="name">saved-messages</div>
<div class="code">\f1f4</div>
</article>
<article class="card">
<i class="icon icon-schedule"></i>
<div class="name">schedule</div>
<div class="code">\f1f5</div>
</article>
<article class="card">
<i class="icon icon-scheduled"></i>
<div class="name">scheduled</div>
<div class="code">\f1f6</div>
</article>
<article class="card">
<i class="icon icon-sd-photo"></i>
<div class="name">sd-photo</div>
<div class="code">\f1f7</div>
</article>
<article class="card">
<i class="icon icon-search"></i>
<div class="name">search</div>
<div class="code">\f1f8</div>
</article>
<article class="card">
<i class="icon icon-select"></i>
<div class="name">select</div>
<div class="code">\f1f9</div>
</article>
<article class="card">
<i class="icon icon-select-filled"></i>
<div class="name">select-filled</div>
<div class="code">\f1fa</div>
</article>
<article class="card">
<i class="icon icon-sell"></i>
<div class="name">sell</div>
<div class="code">\f1fb</div>
</article>
<article class="card">
<i class="icon icon-sell-outline"></i>
<div class="name">sell-outline</div>
<div class="code">\f1fc</div>
</article>
<article class="card">
<i class="icon icon-send"></i>
<div class="name">send</div>
<div class="code">\f1fd</div>
</article>
<article class="card">
<i class="icon icon-send-outline"></i>
<div class="name">send-outline</div>
<div class="code">\f1fe</div>
</article>
<article class="card">
<i class="icon icon-settings"></i>
<div class="name">settings</div>
<div class="code">\f1ff</div>
</article>
<article class="card">
<i class="icon icon-settings-filled"></i>
<div class="name">settings-filled</div>
<div class="code">\f200</div>
</article>
<article class="card">
<i class="icon icon-share-filled"></i>
<div class="name">share-filled</div>
<div class="code">\f201</div>
</article>
<article class="card">
<i class="icon icon-share-screen"></i>
<div class="name">share-screen</div>
<div class="code">\f202</div>
</article>
<article class="card">
<i class="icon icon-share-screen-outlined"></i>
<div class="name">share-screen-outlined</div>
<div class="code">\f203</div>
</article>
<article class="card">
<i class="icon icon-share-screen-stop"></i>
<div class="name">share-screen-stop</div>
<div class="code">\f204</div>
</article>
<article class="card">
<i class="icon icon-show-message"></i>
<div class="name">show-message</div>
<div class="code">\f205</div>
</article>
<article class="card">
<i class="icon icon-sidebar"></i>
<div class="name">sidebar</div>
<div class="code">\f206</div>
</article>
<article class="card">
<i class="icon icon-skip-next"></i>
<div class="name">skip-next</div>
<div class="code">\f207</div>
</article>
<article class="card">
<i class="icon icon-skip-previous"></i>
<div class="name">skip-previous</div>
<div class="code">\f208</div>
</article>
<article class="card">
<i class="icon icon-smallscreen"></i>
<div class="name">smallscreen</div>
<div class="code">\f209</div>
</article>
<article class="card">
<i class="icon icon-smile"></i>
<div class="name">smile</div>
<div class="code">\f20a</div>
</article>
<article class="card">
<i class="icon icon-sort"></i>
<div class="name">sort</div>
<div class="code">\f20b</div>
</article>
<article class="card">
<i class="icon icon-sort-by-date"></i>
<div class="name">sort-by-date</div>
<div class="code">\f20c</div>
</article>
<article class="card">
<i class="icon icon-sort-by-number"></i>
<div class="name">sort-by-number</div>
<div class="code">\f20d</div>
</article>
<article class="card">
<i class="icon icon-sort-by-price"></i>
<div class="name">sort-by-price</div>
<div class="code">\f20e</div>
</article>
<article class="card">
<i class="icon icon-speaker"></i>
<div class="name">speaker</div>
<div class="code">\f20f</div>
</article>
<article class="card">
<i class="icon icon-speaker-muted-story"></i>
<div class="name">speaker-muted-story</div>
<div class="code">\f210</div>
</article>
<article class="card">
<i class="icon icon-speaker-outline"></i>
<div class="name">speaker-outline</div>
<div class="code">\f211</div>
</article>
<article class="card">
<i class="icon icon-speaker-story"></i>
<div class="name">speaker-story</div>
<div class="code">\f212</div>
</article>
<article class="card">
<i class="icon icon-spoiler"></i>
<div class="name">spoiler</div>
<div class="code">\f213</div>
</article>
<article class="card">
<i class="icon icon-spoiler-disable"></i>
<div class="name">spoiler-disable</div>
<div class="code">\f214</div>
</article>
<article class="card">
<i class="icon icon-sport"></i>
<div class="name">sport</div>
<div class="code">\f215</div>
</article>
<article class="card">
<i class="icon icon-star"></i>
<div class="name">star</div>
<div class="code">\f216</div>
</article>
<article class="card">
<i class="icon icon-stars-lock"></i>
<div class="name">stars-lock</div>
<div class="code">\f217</div>
</article>
<article class="card">
<i class="icon icon-stars-refund"></i>
<div class="name">stars-refund</div>
<div class="code">\f218</div>
</article>
<article class="card">
<i class="icon icon-stats"></i>
<div class="name">stats</div>
<div class="code">\f219</div>
</article>
<article class="card">
<i class="icon icon-stealth-future"></i>
<div class="name">stealth-future</div>
<div class="code">\f21a</div>
</article>
<article class="card">
<i class="icon icon-stealth-past"></i>
<div class="name">stealth-past</div>
<div class="code">\f21b</div>
</article>
<article class="card">
<i class="icon icon-stickers"></i>
<div class="name">stickers</div>
<div class="code">\f21c</div>
</article>
<article class="card">
<i class="icon icon-stop"></i>
<div class="name">stop</div>
<div class="code">\f21d</div>
</article>
<article class="card">
<i class="icon icon-stop-raising-hand"></i>
<div class="name">stop-raising-hand</div>
<div class="code">\f21e</div>
</article>
<article class="card">
<i class="icon icon-story-caption"></i>
<div class="name">story-caption</div>
<div class="code">\f21f</div>
</article>
<article class="card">
<i class="icon icon-story-expired"></i>
<div class="name">story-expired</div>
<div class="code">\f220</div>
</article>
<article class="card">
<i class="icon icon-story-priority"></i>
<div class="name">story-priority</div>
<div class="code">\f221</div>
</article>
<article class="card">
<i class="icon icon-story-reply"></i>
<div class="name">story-reply</div>
<div class="code">\f222</div>
</article>
<article class="card">
<i class="icon icon-strikethrough"></i>
<div class="name">strikethrough</div>
<div class="code">\f223</div>
</article>
<article class="card">
<i class="icon icon-tag"></i>
<div class="name">tag</div>
<div class="code">\f224</div>
</article>
<article class="card">
<i class="icon icon-tag-add"></i>
<div class="name">tag-add</div>
<div class="code">\f225</div>
</article>
<article class="card">
<i class="icon icon-tag-crossed"></i>
<div class="name">tag-crossed</div>
<div class="code">\f226</div>
</article>
<article class="card">
<i class="icon icon-tag-filter"></i>
<div class="name">tag-filter</div>
<div class="code">\f227</div>
</article>
<article class="card">
<i class="icon icon-tag-name"></i>
<div class="name">tag-name</div>
<div class="code">\f228</div>
</article>
<article class="card">
<i class="icon icon-timer"></i>
<div class="name">timer</div>
<div class="code">\f229</div>
</article>
<article class="card">
<i class="icon icon-toncoin"></i>
<div class="name">toncoin</div>
<div class="code">\f22a</div>
</article>
<article class="card">
<i class="icon icon-tone"></i>
<div class="name">tone</div>
<div class="code">\f22b</div>
</article>
<article class="card">
<i class="icon icon-tools"></i>
<div class="name">tools</div>
<div class="code">\f22c</div>
</article>
<article class="card">
<i class="icon icon-topic-new"></i>
<div class="name">topic-new</div>
<div class="code">\f22d</div>
</article>
<article class="card">
<i class="icon icon-trade"></i>
<div class="name">trade</div>
<div class="code">\f22e</div>
</article>
<article class="card">
<i class="icon icon-transcribe"></i>
<div class="name">transcribe</div>
<div class="code">\f22f</div>
</article>
<article class="card">
<i class="icon icon-truck"></i>
<div class="name">truck</div>
<div class="code">\f230</div>
</article>
<article class="card">
<i class="icon icon-unarchive"></i>
<div class="name">unarchive</div>
<div class="code">\f231</div>
</article>
<article class="card">
<i class="icon icon-underlined"></i>
<div class="name">underlined</div>
<div class="code">\f232</div>
</article>
<article class="card">
<i class="icon icon-understood"></i>
<div class="name">understood</div>
<div class="code">\f233</div>
</article>
<article class="card">
<i class="icon icon-undo"></i>
<div class="name">undo</div>
<div class="code">\f234</div>
</article>
<article class="card">
<i class="icon icon-unique-profile"></i>
<div class="name">unique-profile</div>
<div class="code">\f235</div>
</article>
<article class="card">
<i class="icon icon-unlist"></i>
<div class="name">unlist</div>
<div class="code">\f236</div>
</article>
<article class="card">
<i class="icon icon-unlist-outline"></i>
<div class="name">unlist-outline</div>
<div class="code">\f237</div>
</article>
<article class="card">
<i class="icon icon-unlock"></i>
<div class="name">unlock</div>
<div class="code">\f238</div>
</article>
<article class="card">
<i class="icon icon-unlock-badge"></i>
<div class="name">unlock-badge</div>
<div class="code">\f239</div>
</article>
<article class="card">
<i class="icon icon-unmute"></i>
<div class="name">unmute</div>
<div class="code">\f23a</div>
</article>
<article class="card">
<i class="icon icon-unpin"></i>
<div class="name">unpin</div>
<div class="code">\f23b</div>
</article>
<article class="card">
<i class="icon icon-unread"></i>
<div class="name">unread</div>
<div class="code">\f23c</div>
</article>
<article class="card">
<i class="icon icon-up"></i>
<div class="name">up</div>
<div class="code">\f23d</div>
</article>
<article class="card">
<i class="icon icon-user"></i>
<div class="name">user</div>
<div class="code">\f23e</div>
</article>
<article class="card">
<i class="icon icon-user-filled"></i>
<div class="name">user-filled</div>
<div class="code">\f23f</div>
</article>
<article class="card">
<i class="icon icon-user-online"></i>
<div class="name">user-online</div>
<div class="code">\f240</div>
</article>
<article class="card">
<i class="icon icon-user-stars"></i>
<div class="name">user-stars</div>
<div class="code">\f241</div>
</article>
<article class="card">
<i class="icon icon-user-tag"></i>
<div class="name">user-tag</div>
<div class="code">\f242</div>
</article>
<article class="card">
<i class="icon icon-video"></i>
<div class="name">video</div>
<div class="code">\f243</div>
</article>
<article class="card">
<i class="icon icon-video-outlined"></i>
<div class="name">video-outlined</div>
<div class="code">\f244</div>
</article>
<article class="card">
<i class="icon icon-video-stop"></i>
<div class="name">video-stop</div>
<div class="code">\f245</div>
</article>
<article class="card">
<i class="icon icon-view-once"></i>
<div class="name">view-once</div>
<div class="code">\f246</div>
</article>
<article class="card">
<i class="icon icon-voice-chat"></i>
<div class="name">voice-chat</div>
<div class="code">\f247</div>
</article>
<article class="card">
<i class="icon icon-volume-1"></i>
<div class="name">volume-1</div>
<div class="code">\f248</div>
</article>
<article class="card">
<i class="icon icon-volume-2"></i>
<div class="name">volume-2</div>
<div class="code">\f249</div>
</article>
<article class="card">
<i class="icon icon-volume-3"></i>
<div class="name">volume-3</div>
<div class="code">\f24a</div>
</article>
<article class="card">
<i class="icon icon-warning"></i>
<div class="name">warning</div>
<div class="code">\f24b</div>
</article>
<article class="card">
<i class="icon icon-web"></i>
<div class="name">web</div>
<div class="code">\f24c</div>
</article>
<article class="card">
<i class="icon icon-webapp"></i>
<div class="name">webapp</div>
<div class="code">\f24d</div>
</article>
<article class="card">
<i class="icon icon-word-wrap"></i>
<div class="name">word-wrap</div>
<div class="code">\f24e</div>
</article>
<article class="card">
<i class="icon icon-zoom-in"></i>
<div class="name">zoom-in</div>
<div class="code">\f24f</div>
</article>
<article class="card">
<i class="icon icon-zoom-out"></i>
<div class="name">zoom-out</div>
<div class="code">\f250</div>
</article>
</section>
</main>
</body>
</html>