@geira/iconfont
Version:
Geira Icon Font
496 lines (452 loc) • 41.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geira Icons v4.0.0</title>
<link rel="icon" href="./favicon.ico">
<link rel="stylesheet" href="./geira-icons.css">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--orange: #F05A28;
--orange-dark: #D44A1A;
--orange-light: #FEF0EB;
--teal: #1A9BA1;
--teal-light: #E8F6F7;
--bg: #F7F6F4;
--surface: #FFFFFF;
--border: #E8E4E0;
--text: #1A1714;
--text-muted: #7A736D;
--radius: 10px;
--shadow-sm: 0 1px 3px rgba(0,0,0,.07);
--shadow-md: 0 4px 12px rgba(0,0,0,.10);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
}
/* ── Header ── */
header {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 0 24px;
height: 60px;
display: flex;
align-items: center;
gap: 12px;
position: sticky;
top: 0;
z-index: 10;
box-shadow: var(--shadow-sm);
}
.logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex: none;
}
.logo img {
width: 32px;
height: 32px;
border-radius: 7px;
}
.logo-text {
font-size: 17px;
font-weight: 700;
color: var(--text);
letter-spacing: -.3px;
}
.version-badge {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
background: var(--bg);
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--border);
flex: none;
}
.pkg-badges {
display: flex;
gap: 6px;
flex: none;
}
.pkg-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-decoration: none;
transition: opacity .15s;
}
.pkg-badge:hover { opacity: .8; }
.pkg-badge.npm {
background: #CB3837;
color: #fff;
}
.pkg-badge.pub {
background: var(--teal);
color: #fff;
}
.pkg-badge svg { flex: none; }
.search-wrap {
flex: 1;
max-width: 360px;
margin-left: auto;
position: relative;
}
.search-wrap input {
width: 100%;
padding: 8px 12px 8px 36px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
font-size: 14px;
outline: none;
background: var(--bg);
color: var(--text);
transition: border-color .15s, background .15s;
}
.search-wrap input:focus {
border-color: var(--orange);
background: var(--surface);
}
.search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 16px;
pointer-events: none;
}
/* ── Nav ── */
nav {
display: flex;
padding: 0 24px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
nav button {
padding: 13px 20px;
border: none;
background: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color .15s;
}
nav button:hover { color: var(--text); }
nav button.active {
color: var(--orange);
border-bottom-color: var(--orange);
}
/* ── Tabs ── */
.tab { display: none; }
.tab.active { display: block; }
/* ── Gallery ── */
.gallery-header {
padding: 20px 24px 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.gallery-header .count {
font-size: 13px;
color: var(--text-muted);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 8px;
padding: 4px 24px 40px;
}
.icon-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 20px 8px 12px;
cursor: pointer;
text-align: center;
transition: border-color .15s, box-shadow .15s, background .15s, transform .1s;
user-select: none;
}
.icon-card:hover {
border-color: var(--orange);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.icon-card.copied {
background: var(--orange-light);
border-color: var(--orange);
}
.icon-card .geira-icons {
font-size: 42px;
display: block;
margin-bottom: 10px;
color: var(--text);
transition: color .15s;
}
.icon-card:hover .geira-icons { color: var(--orange); }
.icon-card .name {
font-size: 10px;
color: var(--text-muted);
word-break: break-all;
line-height: 1.4;
}
.icon-card .uni {
font-size: 9px;
color: #B8B0A8;
margin-top: 4px;
font-family: 'SF Mono', 'Fira Code', monospace;
}
.no-results {
padding: 64px 24px;
text-align: center;
color: var(--text-muted);
}
.no-results .geira-icons { font-size: 48px; display: block; margin-bottom: 12px; opacity: .3; }
/* ── Usage ── */
.usage {
max-width: 760px;
margin: 0 auto;
padding: 36px 24px 64px;
}
.usage h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.usage h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 32px 0 10px; }
.usage p { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin-bottom: 8px; }
.pkg-links { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.pkg-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface);
transition: border-color .15s, color .15s;
}
.pkg-link:hover { border-color: var(--orange); color: var(--orange); }
.pkg-link .dot {
width: 8px; height: 8px;
border-radius: 50%;
flex: none;
}
.pkg-link .dot.npm { background: #CB3837; }
.pkg-link .dot.pub { background: var(--teal); }
pre {
background: #1C1917;
color: #E7E0D8;
border-radius: var(--radius);
padding: 16px 18px;
font-size: 13px;
overflow-x: auto;
margin-bottom: 8px;
line-height: 1.65;
}
code { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
.demo-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.demo-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
}
.demo-chip .geira-icons { color: var(--text); }
/* ── Footer ── */
footer {
text-align: center;
padding: 28px 24px;
font-size: 12px;
color: var(--text-muted);
border-top: 1px solid var(--border);
}
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--orange); }
/* ── Toast ── */
#toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(16px);
background: #1C1917;
color: #E7E0D8;
padding: 10px 20px;
border-radius: var(--radius);
font-size: 13px;
opacity: 0;
transition: opacity .2s, transform .2s;
pointer-events: none;
z-index: 100;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
</style>
</head>
<body>
<header>
<a class="logo" href="https://geira.com" target="_blank">
<img src="./logo.png" alt="Geira">
<span class="logo-text">Geira Icons</span>
</a>
<span class="version-badge">v4.0.0</span>
<div class="pkg-badges">
<a class="pkg-badge npm" href="https://www.npmjs.com/package/@geira/iconfont" target="_blank">
<svg width="12" height="12" viewBox="0 0 18 7" fill="currentColor"><path d="M0 0h18v6H9V7H5V6H0V0zm1 5h2V2h1v3h1V1H1v4zm5-4v5h2V5h2V1H6zm6 0v4h2V2h1v3h1V2h1v3h1V1h-6z"/></svg>
npm
</a>
<a class="pkg-badge pub" href="https://pub.dev/packages/geira_icons" target="_blank">
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.5 3.75L12 11.68 4.5 7.93 12 4.18zM4 9.5l7 3.5v6.82L4 16.32V9.5zm9 10.32V12.98l7-3.5v6.82L13 19.82z"/></svg>
pub.dev
</a>
</div>
<div class="search-wrap">
<span class="geira-icons search-icon gi-search"></span>
<input type="search" id="search" placeholder="Search by name or tag…" autocomplete="off">
</div>
</header>
<nav>
<button class="active" data-tab="gallery">Icons</button>
<button data-tab="usage">Usage</button>
</nav>
<div id="gallery" class="tab active">
<div class="gallery-header">
<span class="count" id="count"></span>
</div>
<div class="grid" id="grid"></div>
<div class="no-results" id="no-results" style="display:none">
<span class="geira-icons gi-search"></span>
No icons match your search.
</div>
</div>
<div id="usage" class="tab">
<div class="usage">
<h2>Using Geira Icons</h2>
<div class="pkg-links">
<a class="pkg-link" href="https://www.npmjs.com/package/@geira/iconfont" target="_blank">
<span class="dot npm"></span> @geira/iconfont on npm
</a>
<a class="pkg-link" href="https://pub.dev/packages/geira_icons" target="_blank">
<span class="dot pub"></span> geira_icons on pub.dev
</a>
</div>
<h3>Install</h3>
<pre><code># Web / npm
npm install @geira/iconfont
# Flutter / pub.dev
flutter pub add geira_icons</code></pre>
<h3>Include CSS</h3>
<pre><code><link rel="stylesheet" href="node_modules/@geira/iconfont/dist/geira-icons.css"></code></pre>
<p>Or via SCSS:</p>
<pre><code>@use '@geira/iconfont/dist/geira-icons';</code></pre>
<h3>Class-based usage (recommended)</h3>
<pre><code><span class="geira-icons gi-pencil"></span></code></pre>
<h3>Ligature-based usage</h3>
<pre><code><span class="geira-icons">pencil</span></code></pre>
<h3>Size modifiers</h3>
<div class="demo-row">
<span class="demo-chip"><span class="geira-icons gi-18 gi-pencil"></span> .gi-18</span>
<span class="demo-chip"><span class="geira-icons gi-24 gi-pencil"></span> .gi-24</span>
<span class="demo-chip"><span class="geira-icons gi-36 gi-pencil"></span> .gi-36</span>
<span class="demo-chip"><span class="geira-icons gi-48 gi-pencil"></span> .gi-48</span>
</div>
<h3>Color modifiers</h3>
<pre><code><span class="geira-icons gi-pencil gi-dark"></span>
<span class="geira-icons gi-pencil gi-dark gi-inactive"></span>
<span class="geira-icons gi-pencil gi-light"></span></code></pre>
<h3>Transform modifiers</h3>
<div class="demo-row">
<span class="demo-chip"><span class="geira-icons gi-rotate-90 gi-pencil"></span> .gi-rotate-90</span>
<span class="demo-chip"><span class="geira-icons gi-rotate-180 gi-pencil"></span> .gi-rotate-180</span>
<span class="demo-chip"><span class="geira-icons gi-flip-h gi-pencil"></span> .gi-flip-h</span>
<span class="demo-chip"><span class="geira-icons gi-spin gi-wifi"></span> .gi-spin</span>
</div>
</div>
</div>
<footer>
<p>©<span id="year"></span> <a href="https://liontude.com" target="_blank">Liontude</a>. All Rights Reserved. Released under MIT License.</p>
</footer>
<div id="toast"></div>
<script>
const ICONS = [{"name":"none","unicode":"E000","tags":["clear","empty","blank","null","placeholder"]},{"name":"pencil","unicode":"E001","tags":["edit","write","draw","create","modify","pen"]},{"name":"brush","unicode":"E002","tags":["paint","art","design","draw","create","color"]},{"name":"wifi","unicode":"E004","tags":["wireless","internet","network","connection","router","signal","online"]},{"name":"chat","unicode":"E005","tags":["message","sms","conversation","bubble","text","talk","discussion"]},{"name":"notifications","unicode":"E007","tags":["alert","bell","alarm","notify","push","reminder"]},{"name":"notifications-off","unicode":"E008","tags":["alert","bell","alarm","mute","silent","disable","no","block"]},{"name":"notifications-active","unicode":"E009","tags":["alert","bell","alarm","ring","active","ringing","new"]},{"name":"send","unicode":"E00A","tags":["submit","deliver","message","arrow","sent","share","forward"]},{"name":"person","unicode":"E00B","tags":["user","account","profile","avatar","contact","member"]},{"name":"people","unicode":"E00C","tags":["group","users","team","accounts","community","members","multiple"]},{"name":"no-show","unicode":"E00D","tags":["person","hide","account","user","absent","cancel","missing","invisible"]},{"name":"person-status","unicode":"E00E","tags":["account","user","online","status","presence","active","indicator"]},{"name":"chart","unicode":"E013","tags":["poll","analytics","bar","graph","data","statistics","report","metrics"]},{"name":"back-ten","unicode":"E01C","tags":["rewind","seconds","arrow","backward","skip","time","player"]},{"name":"forth-ten","unicode":"E01D","tags":["forward","seconds","arrow","skip","time","player","ahead"]},{"name":"shuffle","unicode":"E01E","tags":["random","mix","playlist","sort","order"]},{"name":"restore","unicode":"E01F","tags":["reset","back","undo","arrow","history","previous","recover"]},{"name":"undo","unicode":"E02A","tags":["reset","back","restore","arrow","history","revert","previous"]},{"name":"update","unicode":"E02B","tags":["reload","arrow","sync","refresh","upgrade"]},{"name":"refresh","unicode":"E02C","tags":["reload","update","arrow","sync","restart"]},{"name":"chevron-up","unicode":"E02D","tags":["arrow","expand","keyboard","caret","navigate","up","collapse","top"]},{"name":"chevron-right","unicode":"E02E","tags":["arrow","forward","keyboard","navigate","caret","next","right"]},{"name":"chevron-down","unicode":"E02F","tags":["arrow","expand","keyboard","caret","navigate","down","collapse","bottom","dropdown"]},{"name":"chevron-left","unicode":"E03A","tags":["arrow","back","keyboard","navigate","caret","previous","left"]},{"name":"arrow-up","unicode":"E03B","tags":["navigate","up","direction","move","top"]},{"name":"arrow-right","unicode":"E03C","tags":["forward","keyboard","navigate","next","direction","move"]},{"name":"arrow-down","unicode":"E03D","tags":["navigate","down","direction","move","bottom"]},{"name":"arrow-left","unicode":"E03E","tags":["back","keyboard","navigate","previous","direction","move"]},{"name":"delete","unicode":"E03F","tags":["remove","trash","bin","discard","erase","destroy"]},{"name":"volume","unicode":"E04C","tags":["sound","speaker","audio","loud","max"]},{"name":"volume-low","unicode":"E04D","tags":["sound","speaker","audio","quiet","soft","min"]},{"name":"volume-medium","unicode":"E04E","tags":["sound","speaker","audio","mid"]},{"name":"volume-up","unicode":"E04F","tags":["sound","speaker","audio","loud","increase","higher"]},{"name":"volume-off","unicode":"E05A","tags":["sound","speaker","mute","silent","quiet","no","audio"]},{"name":"hearing","unicode":"E05B","tags":["sound","listen","audio","accessibility","ear","deaf"]},{"name":"mic","unicode":"E05C","tags":["voice","record","audio","microphone","speech","speak"]},{"name":"mic-off","unicode":"E05D","tags":["voice","audio","microphone","mute","silent","no"]},{"name":"recording","unicode":"E05E","tags":["voice","record","audio","video","capture","live"]},{"name":"no-audio","unicode":"E05F","tags":["sound","speaker","mute","silent","disabled","block"]},{"name":"refresh-audio","unicode":"E06A","tags":["sound","speaker","volume","reload","sync","update"]},{"name":"load-audio","unicode":"E06B","tags":["sound","speaker","volume","load","download","import"]},{"name":"play-circle","unicode":"E06D","tags":["record","audio","player","media","start","begin","video","round"]},{"name":"pause-circle","unicode":"E06E","tags":["audio","player","media","wait","hold","round"]},{"name":"stop-circle","unicode":"E06F","tags":["audio","player","media","end","halt","round"]},{"name":"next-circle","unicode":"E07A","tags":["audio","player","forward","media","skip","round"]},{"name":"back-circle","unicode":"E07B","tags":["audio","player","backward","media","rewind","round"]},{"name":"record-circle","unicode":"E07C","tags":["audio","player","media","capture","live","round"]},{"name":"play","unicode":"E07D","tags":["audio","player","media","start","begin","video","record"]},{"name":"pause","unicode":"E07E","tags":["audio","player","media","wait","hold"]},{"name":"stop","unicode":"E07F","tags":["audio","player","media","end","halt"]},{"name":"skip-next","unicode":"E08A","tags":["audio","player","forward","media","next","track"]},{"name":"skip-previous","unicode":"E08B","tags":["audio","player","backward","media","previous","track"]},{"name":"previous","unicode":"E08C","tags":["arrow","caret","chevron","skip","navigate","back","rewind"]},{"name":"next","unicode":"E08D","tags":["arrow","caret","chevron","skip","navigate","forward"]},{"name":"cloud","unicode":"E097","tags":["storage","sky","online","upload","download","weather","sync"]},{"name":"upload","unicode":"E098","tags":["arrow","up","share","transfer","cloud","send","export"]},{"name":"up-balls","unicode":"E099","tags":["arrow","up","load","transfer","move"]},{"name":"download","unicode":"E09A","tags":["arrow","down","save","transfer","cloud","import","get"]},{"name":"rearrange","unicode":"E09B","tags":["arrow","reorder","sort","drag","move","organize","swap"]},{"name":"slider","unicode":"E09D","tags":["filter","setting","range","adjust","control","sort"]},{"name":"list","unicode":"E09E","tags":["menu","items","rows","collection","bullet","ordered"]},{"name":"sidebar-close","unicode":"E09F","tags":["menu","panel","drawer","hide","collapse","navigation"]},{"name":"sidebar-open","unicode":"E0A0","tags":["menu","panel","drawer","show","expand","navigation"]},{"name":"open-menu","unicode":"E0A1","tags":["text","expand","show","navigation","hamburger"]},{"name":"close-menu","unicode":"E0A2","tags":["text","collapse","hide","navigation"]},{"name":"down-menu","unicode":"E0A3","tags":["text","dropdown","expand","navigation","select"]},{"name":"up-menu","unicode":"E0A4","tags":["text","collapse","navigation"]},{"name":"launch","unicode":"E0A5","tags":["exit","open","external","link","dialog","modal","new","window"]},{"name":"exit-to-app","unicode":"E0A6","tags":["exit","logout","leave","app","out","switch"]},{"name":"menu","unicode":"E0A7","tags":["hamburger","navigation","sidebar","lines","options"]},{"name":"more-vert","unicode":"E0A8","tags":["options","dots","vertical","kebab","actions","context"]},{"name":"more-horiz","unicode":"E0A9","tags":["options","dots","horizontal","actions","context"]},{"name":"cell-phone","unicode":"E0B8","tags":["mobile","telephone","smart","device","smartphone","call"]},{"name":"phone","unicode":"E0B9","tags":["telephone","call","contact","voice","landline"]},{"name":"home","unicode":"E0BA","tags":["house","main","start","dashboard","building","beginning"]},{"name":"language","unicode":"E0BB","tags":["globe","translate","international","world","locale","earth"]},{"name":"url","unicode":"E0BC","tags":["link","web","address","browser","http","internet","href"]},{"name":"lang","unicode":"E0BD","tags":["language","translate","text","locale","alphabet"]},{"name":"lang-help","unicode":"E0BE","tags":["language","translate","help","support","locale","guide"]},{"name":"map","unicode":"E0BF","tags":["place","location","pin","navigate","gps","directions","geography"]},{"name":"country","unicode":"E0C0","tags":["place","location","flag","globe","gps","nation","world"]},{"name":"navigation","unicode":"E0C1","tags":["place","location","compass","gps","direction","guide","map"]},{"name":"notification","unicode":"E0C8","tags":["push","mobile","phone","alert","bell","badge"]},{"name":"flag","unicode":"E0C9","tags":["report","mark","signal","country","warning","bookmark"]},{"name":"place","unicode":"E0CA","tags":["location","pin","map","marker","gps","spot","point"]},{"name":"mail","unicode":"E0CB","tags":["email","envelope","message","inbox","letter","send"]},{"name":"award","unicode":"E0E7","tags":["prize","badge","medal","recognition","honor","discount","achievement"]},{"name":"trophy","unicode":"E0E8","tags":["prize","award","win","achievement","champion","cup","competition"]},{"name":"shopping-cart","unicode":"E0F5","tags":["checkout","buy","purchase","ecommerce","basket","shop","order"]},{"name":"bet","unicode":"E0F6","tags":["credit","card","debit","money","cash","casino","game","wager","gamble"]},{"name":"add-balance","unicode":"E0F7","tags":["credit","debit","money","cash","wallet","deposit","payment","top"]},{"name":"payment","unicode":"E0F8","tags":["credit","card","debit","money","cash","pay","transaction","checkout"]},{"name":"bill","unicode":"E0F9","tags":["invoice","receipt","money","cash","payment","document"]},{"name":"deal","unicode":"E0FA","tags":["prize","redeem","promo","discount","offer","bargain","sale"]},{"name":"gift","unicode":"E0FB","tags":["prize","promo","discount","present","surprise","reward","celebrate"]},{"name":"time","unicode":"E0FC","tags":["clock","schedule","watch","hour","minute","timer"]},{"name":"chronometer","unicode":"E0FD","tags":["clock","schedule","watch","stopwatch","timer","measure"]},{"name":"time-record","unicode":"E0FE","tags":["chronometer","clock","watch","stopwatch","timer","log","history"]},{"name":"hourglass","unicode":"E100","tags":["clock","time","wait","loading","countdown","sand","patience"]},{"name":"folder","unicode":"E111","tags":["doc","file","directory","storage","organize"]},{"name":"folder-open","unicode":"E112","tags":["doc","file","directory","storage","expand","open"]},{"name":"folder-add","unicode":"E113","tags":["doc","file","directory","storage","new","create","plus"]},{"name":"folder-special","unicode":"E114","tags":["doc","file","directory","storage","star","favorite","important"]},{"name":"folder-delete","unicode":"E115","tags":["doc","file","directory","storage","remove","trash","discard"]},{"name":"folder-secure","unicode":"E116","tags":["doc","file","directory","storage","lock","private","encrypted"]},{"name":"page","unicode":"E117","tags":["doc","file","document","paper","sheet"]},{"name":"book","unicode":"E118","tags":["study","docs","read","learning","knowledge","pages"]},{"name":"test","unicode":"E119","tags":["study","exam","quiz","assessment","evaluation"]},{"name":"flash-cards","unicode":"E11A","tags":["study","learning","flip","flashcard","memorize","review"]},{"name":"test-repeat","unicode":"E11B","tags":["study","exam","quiz","retry","redo","practice","again"]},{"name":"test-star","unicode":"E11C","tags":["study","exam","quiz","favorite","rate","important"]},{"name":"test-daily","unicode":"E11D","tags":["study","exam","quiz","calendar","daily","schedule","routine"]},{"name":"audiobook","unicode":"E123","tags":["study","docs","book","audio","listen","learning","podcast"]},{"name":"pdf","unicode":"E124","tags":["page","doc","file","document","acrobat","format"]},{"name":"doc","unicode":"E125","tags":["page","document","file","word","text","write"]},{"name":"jpg","unicode":"E126","tags":["image","photo","picture","file","format"]},{"name":"png","unicode":"E127","tags":["image","photo","picture","file","format","transparent"]},{"name":"chevron-tr","unicode":"E130","tags":["arrow","diagonal","caret","top","right","corner","expand"]},{"name":"chevron-dr","unicode":"E131","tags":["arrow","diagonal","caret","down","right","corner","collapse"]},{"name":"chevron-dl","unicode":"E132","tags":["arrow","diagonal","caret","down","left","corner"]},{"name":"chevron-tl","unicode":"E133","tags":["arrow","diagonal","caret","top","left","corner"]},{"name":"check","unicode":"E134","tags":["mark","done","complete","confirm","tick","yes","correct","ok"]},{"name":"check-outline","unicode":"E135","tags":["mark","done","complete","confirm","tick","yes","border","outline"]},{"name":"checked","unicode":"E136","tags":["square","mark","box","checkbox","selected","true","active"]},{"name":"unchecked","unicode":"E137","tags":["square","mark","box","checkbox","empty","false","inactive"]},{"name":"rb-checked","unicode":"E139","tags":["circle","mark","radio","button","selected","active","dot"]},{"name":"rb-unchecked","unicode":"E13A","tags":["circle","mark","radio","button","empty","inactive"]},{"name":"match","unicode":"E13B","tags":["correspond","align","fit","check","equal","compare","verify"]},{"name":"thunder","unicode":"E162","tags":["lightning","bolt","electric","weather","flash","energy","storm","power"]},{"name":"temperature","unicode":"E163","tags":["thermometer","hot","warm","cold","heat","weather","celsius","degree"]},{"name":"odd-even","unicode":"E164","tags":["alternating","split","fire","warm","pattern"]},{"name":"hot","unicode":"E165","tags":["fire","warm","heat","burn","temperature","flame"]},{"name":"cold","unicode":"E166","tags":["ice","frozen","snow","temperature","winter","cool","freeze"]},{"name":"hot-cold","unicode":"E167","tags":["fire","ice","cold","temperature","contrast","both","warm"]},{"name":"delta","unicode":"E168","tags":["change","difference","triangle","math","variation","sign"]},{"name":"delta-cold","unicode":"E169","tags":["cold","frozen","change","difference","ice","sign"]},{"name":"delta-hot","unicode":"E16A","tags":["hot","fire","warm","change","difference","sign"]},{"name":"sum","unicode":"E16B","tags":["plus","add","total","math","sigma","aggregate","count"]},{"name":"sum-hot","unicode":"E16C","tags":["plus","add","fire","warm","total","hot"]},{"name":"sum-cold","unicode":"E16D","tags":["plus","add","ice","cold","frozen","total"]},{"name":"face-id","unicode":"E177","tags":["fingerprint","identity","biometric","security","face","recognition","passcode","auth"]},{"name":"scan","unicode":"E17F","tags":["barcode","qr","code","reader","capture"]},{"name":"retry-scan","unicode":"E180","tags":["barcode","qr","code","reader","retry","reload","again"]},{"name":"ar-horiz","unicode":"E181","tags":["aspect","ratio","horizontal","landscape","resize","widescreen"]},{"name":"ar-vert","unicode":"E182","tags":["aspect","ratio","vertical","portrait","resize"]},{"name":"parking","unicode":"E19F","tags":["car","spot","vehicle","park","transport","p"]},{"name":"bike","unicode":"E1A0","tags":["bicycle","cycling","transport","pedal","eco"]},{"name":"walk","unicode":"E1A1","tags":["pedestrian","foot","transport","direction","step"]},{"name":"girl","unicode":"E1A2","tags":["child","kid","female","young","person"]},{"name":"boy","unicode":"E1A3","tags":["child","kid","male","young","person"]},{"name":"disabled","unicode":"E1A4","tags":["wheelchair","accessibility","handicap","inclusive","mobility"]},{"name":"photo-id","unicode":"E1A5","tags":["identity","badge","passport","document","id","credential"]},{"name":"learn","unicode":"E1A6","tags":["study","education","user","account","person","student","knowledge"]},{"name":"examen","unicode":"E1A7","tags":["exam","test","study","assessment","person","student","education"]},{"name":"video-call","unicode":"E1A8","tags":["virtual","mobile","conference","camera","meet","online","person"]},{"name":"interview","unicode":"E1A9","tags":["person","people","talk","virtual","meeting","conversation","hire"]},{"name":"politician","unicode":"E1CC","tags":["speech","president","podium","government","leader","public"]},{"name":"bull","unicode":"E1CD","tags":["animal","horns","stock","market","strong","cow"]},{"name":"cow","unicode":"E1CE","tags":["animal","farm","livestock","bull","dairy"]},{"name":"verified","unicode":"E1E1","tags":["shield","security","check","trusted","authenticated","approved","safe"]},{"name":"verified-user","unicode":"E1E2","tags":["shield","security","person","account","trusted","authenticated"]},{"name":"lock","unicode":"E1E3","tags":["padlock","secure","private","password","closed","protect","safe"]},{"name":"lock-open","unicode":"E1E4","tags":["padlock","unlock","open","access","insecure"]},{"name":"advertising","unicode":"E1FA","tags":["ads","publicity","campaign","marketing","promote","banner"]},{"name":"no-advertising","unicode":"E1FB","tags":["ads","publicity","campaign","marketing","block","mute","ban"]},{"name":"video","unicode":"E1FC","tags":["camera","record","media","film","movie","clip","play"]},{"name":"alert","unicode":"E200","tags":["warning","error","danger","caution","exclamation","notice"]},{"name":"question-answer","unicode":"E201","tags":["faqs","help","chat","support","bubble","qa","info"]},{"name":"info","unicode":"E202","tags":["help","information","about","details","notice","tooltip"]},{"name":"help","unicode":"E203","tags":["support","faq","question","assistance","guidance","info"]},{"name":"error","unicode":"E204","tags":["warning","alert","danger","bug","problem","failed","issue"]},{"name":"visibility","unicode":"E205","tags":["eye","show","visible","view","display","see","preview"]},{"name":"visibility-off","unicode":"E206","tags":["eye","hide","invisible","blind","conceal","mask","password"]},{"name":"thumb-up","unicode":"E207","tags":["like","approve","positive","vote","good","agree","yes"]},{"name":"thumb-down","unicode":"E208","tags":["unlike","dislike","reject","negative","vote","bad","disagree"]},{"name":"favorite-border","unicode":"E209","tags":["like","heart","love","wish","unfilled","outline","hollow"]},{"name":"favorite","unicode":"E20A","tags":["like","heart","love","wish","filled","saved","loved"]},{"name":"favorite-dislike","unicode":"E20B","tags":["heart","unlike","dislike","broken","removed","unlike"]},{"name":"share","unicode":"E20C","tags":["social","distribute","forward","export","send","spread"]},{"name":"bookmark","unicode":"E20D","tags":["save","mark","tag","favorite","reading","later","store"]},{"name":"star-border","unicode":"E20E","tags":["grade","rate","empty","unfilled","outline","review"]},{"name":"star-half","unicode":"E20F","tags":["rate","partial","half","review","rating"]},{"name":"star","unicode":"E210","tags":["rate","grade","favorite","quality","review","featured"]},{"name":"rate","unicode":"E211","tags":["review","star","comment","thumb","feedback","grade"]},{"name":"ticket","unicode":"E212","tags":["voucher","pass","event","coupon","entry","admission"]},{"name":"game","unicode":"E213","tags":["play","console","gaming","entertainment","joystick","fun"]},{"name":"lotto","unicode":"E214","tags":["luck","bingo","casino","gaming","lottery","draw","chance"]},{"name":"cabala","unicode":"E215","tags":["eye","luck","dream","mystical","spiritual","symbol"]},{"name":"clover","unicode":"E216","tags":["luck","dream","lottery","green","shamrock","chance"]},{"name":"legal","unicode":"E219","tags":["lawyer","justice","court","law","gavel","scale","rules"]},{"name":"sad-face","unicode":"E22D","tags":["emoji","sad","unhappy","cry","emotion","frown","negative"]},{"name":"happy-face","unicode":"E22E","tags":["emoji","happy","smile","joy","emotion","positive","grin"]},{"name":"dictation","unicode":"E22F","tags":["voice","sound","write","speech","microphone","transcribe"]},{"name":"oral","unicode":"E230","tags":["record","speech","mic","text","voice","exam","speak","talk"]},{"name":"event-available","unicode":"E231","tags":["calendar","date","appointment","schedule","check","done","free"]},{"name":"upcoming","unicode":"E232","tags":["calendar","date","appointment","schedule","future","next","soon"]},{"name":"past","unicode":"E233","tags":["calendar","date","appointment","schedule","history","previous","done"]},{"name":"event","unicode":"E234","tags":["calendar","date","appointment","schedule","today","meeting"]},{"name":"no-event","unicode":"E235","tags":["calendar","date","appointment","schedule","cancel","empty","blocked"]},{"name":"month","unicode":"E236","tags":["calendar","date","appointment","schedule","monthly","view","grid"]},{"name":"dashboard","unicode":"E23A","tags":["home","main","overview","panel","admin","control","summary"]},{"name":"campaign","unicode":"E23B","tags":["megaphone","bullhorn","mic","marketing","ads","announce","broadcast"]},{"name":"unpin","unicode":"E243","tags":["pin","locate","remove","detach","unmark"]},{"name":"push-pin","unicode":"E244","tags":["pin","locate","attach","tack","mark","fixed"]},{"name":"search","unicode":"E245","tags":["magnifying","zoom","find","query","lookup","discover"]},{"name":"search-page","unicode":"E246","tags":["magnifying","zoom","find","document","doc","page"]},{"name":"search-person","unicode":"E247","tags":["magnifying","zoom","account","user","find","profile","person"]},{"name":"search-number","unicode":"E248","tags":["magnifying","zoom","find","numeric","number","count"]},{"name":"camera","unicode":"E254","tags":["photo","picture","capture","lens","shoot","photograph"]},{"name":"no-image","unicode":"E255","tags":["photos","gallery","media","missing","broken","empty","placeholder"]},{"name":"images","unicode":"E256","tags":["collections","photos","gallery","media","pictures","album"]},{"name":"remove","unicode":"E257","tags":["minus","subtract","delete","take","away","reduce"]},{"name":"remove-circle","unicode":"E258","tags":["minus","subtract","delete","round","button"]},{"name":"add","unicode":"E259","tags":["plus","sum","create","new","insert","increase"]},{"name":"add-circle","unicode":"E25A","tags":["plus","sum","create","new","insert","round","button"]},{"name":"close","unicode":"E25B","tags":["cancel","clear","dismiss","exit","x","remove","cross"]},{"name":"cancel","unicode":"E25C","tags":["clear","close","dismiss","abort","stop","x"]},{"name":"filter","unicode":"E25D","tags":["sort","refine","search","criteria","narrow","adjust"]},{"name":"edit","unicode":"E25E","tags":["create","pen","modify","write","change","update","pencil"]},{"name":"settings","unicode":"E25F","tags":["gear","config","preferences","options","configure","system","control"]},{"name":"save","unicode":"E260","tags":["disk","store","write","floppy","preserve","keep"]},{"name":"add-square","unicode":"E262","tags":["plus","add","insert","box","create","new"]},{"name":"remove-square","unicode":"E263","tags":["minus","subtract","delete","box","reduce"]},{"name":"more-less","unicode":"E264","tags":["approximately","roughly","plus","minus","compare","estimate","range"]},{"name":"total","unicode":"E265","tags":["amount","sum","count","math","aggregate","result","all"]},{"name":"number","unicode":"E266","tags":["hashtag","hash","count","numeric","pound","figure"]},{"name":"television","unicode":"E26B","tags":["tv","monitor","screen","display","broadcast","channel","watch"]},{"name":"store","unicode":"E26C","tags":["storefront","business","local","shop","retail","commerce","market"]},{"name":"drink","unicode":"E26D","tags":["beverage","bar","wine","cocktail","glass","amenity","alcohol"]},{"name":"open-box","unicode":"E271","tags":["gift","resource","surprise","unboxing","package","delivery"]},{"name":"briefcase","unicode":"E274","tags":["portfolio","work","job","business","luggage","bag","professional","docs"]},{"name":"bulb-number","unicode":"E279","tags":["hint","idea","think","count","tip","light","numbered"]},{"name":"bulb-on","unicode":"E27A","tags":["idea","hint","think","active","bright","light","enabled"]},{"name":"bulb","unicode":"E27B","tags":["idea","hint","think","inactive","off","light","suggestion"]},{"name":"cashier","unicode":"E27C","tags":["pos","cash","register","checkout","payment","store","retail"]},{"name":"afternoon","unicode":"E285","tags":["sun","noon","day","bright","weather","daytime"]},{"name":"evening","unicode":"E286","tags":["moon","night","dark","dusk","sky","weather","nighttime"]},{"name":"full-square","unicode":"E287","tags":["square","filled","shape","block","solid"]},{"name":"full-dot","unicode":"E288","tags":["circle","dot","filled","point","bullet","round"]},{"name":"brightness-1","unicode":"E289","tags":["brightness","light","sun","display"]},{"name":"brightness-2","unicode":"E28A","tags":["brightness","light","sun","display"]},{"name":"brightness-3","unicode":"E28B","tags":["brightness","light","sun","display"]},{"name":"brightness-4","unicode":"E28C","tags":["brightness","light","sun","display"]},{"name":"brightness-5","unicode":"E28D","tags":["brightness","light","sun","display"]},{"name":"brightness-6","unicode":"E28E","tags":["brightness","light","sun","display"]},{"name":"brightness-7","unicode":"E28F","tags":["brightness","light","sun","display"]},{"name":"facebook","unicode":"E291","tags":["social","network","fb","social media","meta"]},{"name":"twitter","unicode":"E292","tags":["social","network","tweet","bird","social media"]},{"name":"youtube","unicode":"E293","tags":["social","network","video","streaming","social media","watch"]},{"name":"instagram","unicode":"E294","tags":["social","network","photo","stories","social media","reel"]},{"name":"linkedin","unicode":"E295","tags":["social","network","professional","job","social media","career"]},{"name":"github","unicode":"E2A0","tags":["code","repository","git","developer","open source","version","logo"]},{"name":"gitlab","unicode":"E2A1","tags":["code","repository","git","developer","devops","logo"]},{"name":"npm","unicode":"E2A2","tags":["package","javascript","node","developer","registry","logo"]},{"name":"apple-logo","unicode":"E2A3","tags":["brand","ios","mac","tech","logo"]},{"name":"facebook-logo","unicode":"E2A4","tags":["brand","social","fb","meta","logo"]},{"name":"google-logo","unicode":"E2A5","tags":["brand","search","tech","logo"]},{"name":"whatsapp-logo","unicode":"E2A6","tags":["brand","messaging","chat","social","logo"]},{"name":"x-logo","unicode":"E2A7","tags":["twitter","brand","social","logo"]},{"name":"logo","unicode":"E2AF","tags":["brand","geira","create","art","font","identity"]}];
const grid = document.getElementById('grid');
const countEl = document.getElementById('count');
const noResults = document.getElementById('no-results');
const searchInput = document.getElementById('search');
function render(query) {
const q = (query || '').toLowerCase().trim();
const filtered = q
? ICONS.filter(ic => ic.name.includes(q) || ic.tags.some(t => t.includes(q)))
: ICONS;
countEl.textContent = filtered.length + ' icons';
grid.innerHTML = '';
noResults.style.display = filtered.length === 0 ? 'block' : 'none';
for (const ic of filtered) {
const card = document.createElement('div');
card.className = 'icon-card';
card.innerHTML =
'<span class="geira-icons gi-' + ic.name + '"></span>' +
'<div class="name">' + ic.name + '</div>' +
'<div class="uni">' + ic.unicode + '</div>';
card.addEventListener('click', () => copyClass(card, '.gi-' + ic.name));
grid.appendChild(card);
}
}
function copyClass(card, cls) {
navigator.clipboard.writeText(cls).then(() => {
card.classList.add('copied');
showToast('Copied ' + cls);
setTimeout(() => card.classList.remove('copied'), 1000);
});
}
const toast = document.getElementById('toast');
let toastTimer;
function showToast(msg) {
toast.textContent = msg;
toast.classList.add('show');
clearTimeout(toastTimer);
toastTimer = setTimeout(() => toast.classList.remove('show'), 1800);
}
searchInput.addEventListener('input', e => render(e.target.value));
document.querySelectorAll('nav button').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('nav button').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
btn.classList.add('active');
document.getElementById(btn.dataset.tab).classList.add('active');
});
});
document.getElementById('year').textContent = new Date().getFullYear();
render('');
// Live reload (dev server only)
(function () {
if (!location.hostname || location.hostname === '') return;
const ws = new WebSocket('ws://' + location.host);
ws.onmessage = e => {
const msg = JSON.parse(e.data);
if (msg.type === 'reload') location.reload();
};
ws.onclose = () => setTimeout(() => location.reload(), 1000);
})();
</script>
</body>
</html>