Icon Font
Font-based icons for scalable and customizable interface elements.
Basic Icon Font
HTML
<div
style="
display: flex;
gap: 24px;
flex-wrap: wrap;
align-items: center;
"
>
<span
class="ss-c-icon-font"
style="
font-family: "Material Icons", sans-serif;
font-size: 24px;
"
>
home
</span>
<span
class="ss-c-icon-font"
style="
font-family: "Material Icons", sans-serif;
font-size: 24px;
"
>
search
</span>
<span
class="ss-c-icon-font"
style="
font-family: "Material Icons", sans-serif;
font-size: 24px;
"
>
settings
</span>
<span
class="ss-c-icon-font"
style="
font-family: "Material Icons", sans-serif;
font-size: 24px;
"
>
favorite
</span>
<span
class="ss-c-icon-font"
style="
font-family: "Material Icons", sans-serif;
font-size: 24px;
"
>
mail
</span>
</div>Icon Font Sizes
★
16px
★
24px
★
32px
★
48px
★
64px
HTML
<div
style="display: flex; gap: 32px; flex-wrap: wrap; align-items: end"
>
<div style="text-align: center">
<span style="font-size: 16px; display: block">★</span>
<span
style="
font-size: 11px;
opacity: 0.6;
margin-top: 4px;
display: block;
"
>
16px
</span>
</div>
<div style="text-align: center">
<span style="font-size: 24px; display: block">★</span>
<span
style="
font-size: 11px;
opacity: 0.6;
margin-top: 4px;
display: block;
"
>
24px
</span>
</div>
<div style="text-align: center">
<span style="font-size: 32px; display: block">★</span>
<span
style="
font-size: 11px;
opacity: 0.6;
margin-top: 4px;
display: block;
"
>
32px
</span>
</div>
<div style="text-align: center">
<span style="font-size: 48px; display: block">★</span>
<span
style="
font-size: 11px;
opacity: 0.6;
margin-top: 4px;
display: block;
"
>
48px
</span>
</div>
<div style="text-align: center">
<span style="font-size: 64px; display: block">★</span>
<span
style="
font-size: 11px;
opacity: 0.6;
margin-top: 4px;
display: block;
"
>
64px
</span>
</div>
</div>Colored Icons
♦
✔
⚠
✖
ℹ
HTML
<div
style="display: flex; gap: 24px; flex-wrap: wrap; font-size: 32px"
>
<span role="img" aria-label="Featured" style="color: var(--ss-color-accent)">♦</span>
<span role="img" aria-label="Success" style="color: var(--ss-color-success)">✔</span>
<span role="img" aria-label="Warning" style="color: var(--ss-color-warning)">⚠</span>
<span role="img" aria-label="Error" style="color: var(--ss-color-error)">✖</span>
<span role="img" aria-label="Information" style="color: var(--ss-color-info)">ℹ</span>
</div>Icon with Background
⚙
✓
♪
⭐
HTML
<div style="display: flex; gap: 16px; flex-wrap: wrap">
<span
style="
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--ss-color-accent);
color: var(--ss-color-on-accent);
border-radius: var(--ss-radius-lg);
font-size: 24px;
"
>
⚙
</span>
<span
style="
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--ss-color-success);
color: var(--ss-color-on-success);
border-radius: 50%;
font-size: 24px;
"
>
✓
</span>
<span
style="
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-lg);
font-size: 24px;
"
>
♪
</span>
<span
style="
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 2px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
font-size: 24px;
"
>
⭐
</span>
</div>Icon in Button
HTML
<div style="display: flex; gap: 12px; flex-wrap: wrap">
<button
style="
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border: none;
background: var(--ss-color-accent);
color: var(--ss-color-on-accent);
border-radius: var(--ss-radius-lg);
cursor: pointer;
font-size: 14px;
"
>
<span aria-hidden="true">+</span>
Add Item
</button>
<button
style="
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border: none;
background: var(--ss-color-error);
color: var(--ss-color-on-error);
border-radius: var(--ss-radius-lg);
cursor: pointer;
font-size: 14px;
"
>
<span aria-hidden="true">␡</span>
Delete
</button>
<button
style="
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border: 1px solid var(--ss-color-border);
background: transparent;
border-radius: var(--ss-radius-lg);
cursor: pointer;
font-size: 14px;
"
>
<span aria-hidden="true">⇧</span>
Export
</button>
<button
style="
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
background: var(--ss-color-surface-alt);
border-radius: 50%;
cursor: pointer;
font-size: 18px;
"
type="button"
aria-label="Settings"
>
<span aria-hidden="true">⚙</span>
</button>
</div>Icon List
- Documents
- Images
- Music
- Videos
HTML
<ul style="list-style: none; padding: 0; margin: 0; max-width: 300px">
<li
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--ss-color-border);
"
>
<span aria-hidden="true" style="font-size: 20px">▤</span>
<span>Documents</span>
</li>
<li
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--ss-color-border);
"
>
<span aria-hidden="true" style="font-size: 20px">▭</span>
<span>Images</span>
</li>
<li
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--ss-color-border);
"
>
<span aria-hidden="true" style="font-size: 20px">♪</span>
<span>Music</span>
</li>
<li
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
"
>
<span aria-hidden="true" style="font-size: 20px">▷</span>
<span>Videos</span>
</li>
</ul>