Icons — SantyCSS

Quick Start

Add one CSS file — then combine .brand-icon with any .brand-icon-* class.

1 Include the CSS

<link rel="stylesheet" href="santy.css">
<link rel="stylesheet" href="santy-icons.css">

2 Use any icon

<span class="brand-icon brand-icon-github"></span>
<!-- with brand color -->
<span class="brand-icon brand-icon-react brand-icon-color-react brand-icon-xl"></span>

Or install via npm

npm install santycss

Sizes

Use .brand-icon-{size} classes or set font-size on the parent.

.brand-icon-xs
0.625rem

.brand-icon-sm
0.875rem

.brand-icon-md
1rem

.brand-icon-lg
1.5rem

.brand-icon-xl
2rem

.brand-icon-3x
3rem

.brand-icon-5x
5rem

Fixed pixel classes

<span class="brand-icon brand-icon-github brand-icon-16"></span>  <!-- 16px -->
<span class="brand-icon brand-icon-github brand-icon-24"></span>  <!-- 24px -->
<span class="brand-icon brand-icon-github brand-icon-48"></span>  <!-- 48px -->

Colors

Icons use background-color: currentColor — so any SantyCSS colour class works. Use .brand-icon-color-* for exact brand colours.

Brand colours

<!-- Official brand color -->
<span class="brand-icon brand-icon-github brand-icon-color-github brand-icon-xl"></span>

<!-- Any SantyCSS color -->
<span class="brand-icon brand-icon-github color-blue-600 brand-icon-xl"></span>

<!-- Inline color -->
<span class="brand-icon brand-icon-react brand-icon-xl" style="background-color:#61DAFB"></span>

Usage Patterns

Common ways to use brand icons in your UI.

Social links footer

<a href="#" class="make-flex align-center justify-center round-corners-full"
   style="width:40px;height:40px;background:#1DA1F2;">
  <span class="brand-icon brand-icon-twitter"
        style="background-color:#fff;width:18px;height:18px;"></span>
</a>

Tech stack badges

React Node.js Docker AWS

<span class="make-flex align-center gap-6 add-padding-x-12 add-padding-y-6 round-corners-8"
      style="background:#eff6ff;border:1px solid #bfdbfe;">
  <span class="brand-icon brand-icon-react"
        style="background-color:#61DAFB;width:16px;height:16px;"></span>
  <span class="set-text-13 text-semibold color-blue-700">React</span>
</span>

OAuth login buttons

<button class="make-flex align-center gap-10 ...">
  <span class="brand-icon brand-icon-google"
        style="background-color:#4285F4;width:18px;height:18px;"></span>
  Continue with Google
</button>

Inline in text

Star us on GitHub, follow on X, and join the Discord.

Star us on
<span class="brand-icon brand-icon-github"
      style="background-color:#181717;width:16px;height:16px;vertical-align:-3px;display:inline-block;"></span>
GitHub

Class Reference

All available classes from santy-icons.css.

Class	Description	Example value
.brand-icon	Base icon class — required on every icon element	display:inline-block; mask: var(--brand-icon-url)
.brand-icon-{name}	Sets the icon SVG via --brand-icon-url CSS variable	.brand-icon-github, .brand-icon-react, .brand-icon-twitter …
.brand-icon-xs	Extra small size	font-size: 0.625rem
.brand-icon-sm	Small size	font-size: 0.875rem
.brand-icon-md	Medium size (default)	font-size: 1rem
.brand-icon-lg	Large size	font-size: 1.5rem
.brand-icon-xl	Extra large size	font-size: 2rem
.brand-icon-2x — 6x	Multiplier sizes	font-size: 2rem — 6rem
.brand-icon-16 — 96	Fixed pixel sizes	width/height: 16px — 96px
.brand-icon-color-{name}	Apply official brand background colour	.brand-icon-color-github → #181717
.brand-icon-badge	Circular badge wrapper for an icon	Displays icon in a colour circle
.shape-square	Modifier for .brand-icon-badge — square with 6px radius	border-radius: 6px
.shape-rounded	Modifier for .brand-icon-badge — rounded square	border-radius: 12px
.brand-icon-spin	Continuously rotating animation	animation: brand-icon-spin 2s linear infinite
.brand-icon-pulse	8-step pulse rotation animation	animation: brand-icon-spin 1s steps(8) infinite

SantyCSS Icons

Developer Tools

Platforms & Devices

Payment

Business & Finance

Communication

Brand colours

SantyCSS Icons

Social Media

Developer Tools

Platforms & Devices

Payment

Business & Finance

Communication

Brand colours