Pure CSS Icons

No icon fonts needed! Create beautiful, scalable icons using just CSS. From simple shapes to complex animations - all without a single image file.

Basic Icons

Essential icons crafted with CSS shapes and pseudo-elements

Close

.close-icon

Arrow

.arrow-right

Heart

.heart-icon

Star

.star-icon

Envelope

.envelope-icon

Check

.check-icon

Search

.search-icon

Home

.home-icon

User

.user-icon

Settings

.settings-icon

Download

.download-icon

Animated Icons

Icons that come alive with CSS animations

Spinner

.spinner-icon

Pulse Heart

.pulse-heart

Bell

.bell-icon

Loading

.loading-dots

WiFi

.wifi-icon

Battery

.battery-icon

Interactive Icons

Icons that respond to your actions - hover or click to see the magic!

Menu Toggle

.menu-to-close

Play/Pause

.play-pause

Like Button

.like-button

.share-icon

Mail Hover

.hover-mail

Expand

.expand-icon

British Bonus Icons

A spot of tea, anyone? These icons are quintessentially British!

Cuppa

.tea-cup

Brolly

.umbrella-icon

Crown

.crown-icon

Icon Techniques

Learn how to create your own CSS icons

Basic Shapes

/* Simple circle icon */
.circle-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--colour-primary);
}

/* Triangle using borders */
.triangle-icon {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid var(--colour-primary);
}

Pseudo Elements

/* Plus icon using ::before and ::after */
.plus-icon {
    position: relative;
    width: 40px;
    height: 40px;
}

.plus-icon::before,
.plus-icon::after {
    content: '';
    position: absolute;
    background: var(--colour-primary);
}

.plus-icon::before {
    width: 100%;
    height: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.plus-icon::after {
    width: 4px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

Animations

/* Rotating spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner-icon {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0,0,0,0.1);
    border-top-color: var(--colour-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

Icon Design Tips

📏

Size Consistency

Keep icons within a consistent grid (24x24, 32x32) for visual harmony.

🎨

Use CSS Variables

Define colours as variables for easy theming and consistency.

⚡

Performance

CSS icons load instantly - no HTTP requests needed!

♿

Accessibility

Always add proper ARIA labels for interactive icons.