Shipping a full icon font for three arrows and a close button slows every page and adds layout risk. Pure CSS icons remove the font request, avoid icon-Glyph mapping, and paint instantly with the CSS you already send. By the end of this article you will build two crisp, scalable icons with nothing but CSS, wire them for theming and motion, and understand why they load faster than font icons like Font Awesome.
Why Pure CSS Icons Matter
Icon fonts bundle hundreds of glyphs into a binary file. You pay for all of them on every route where the CSS references the font. The browser blocks until it decides how to render those glyphs, which can lead to flash of invisible text or a mid-frame icon swap that nudges content around. Pure CSS icons skip the font fetch, skip the font parsing, and skip the reflow that happens when the font arrives late.
SVG icons are a strong choice as well, and they remain a good default for complex shapes. For simple geometric glyphs, close, chevrons, arrows, hamburgers, pure CSS is lighter and faster. You get theming via currentColor, scaling via a single size variable, and instant paint because the shapes are built from borders, transforms, and backgrounds that the browser already handles on every page.
Prerequisites
You will build icons with basic HTML wrappers and CSS pseudo-elements. A few variables will keep sizing and colors consistent across the set.
- Basic HTML
- CSS custom properties
- CSS pseudo-elements (::before / ::after)
Step 1: The HTML Structure
Each icon is a single inline element with a semantic label near it for screen readers, or an aria-label when the icon alone conveys meaning. Pseudo-elements draw the strokes. This keeps HTML small, predictable, and friendly to theming. Here is the full markup that the rest of the article styles.
<!-- HTML -->
<div class="icon-demo">
<div class="icon-card">
<span class="icon icon--close" aria-hidden="true"></span>
<span class="icon-label">Close</span>
</div>
<div class="icon-card">
<span class="icon icon--chevron-right" aria-hidden="true"></span>
<span class="icon-label">Next</span>
</div>
<!-- Example of a meaningful, stand-alone icon: -->
<button class="icon-button" aria-label="Close dialog">
<span class="icon icon--close" aria-hidden="true"></span>
</button>
</div>
Step 2: The Basic CSS & Styling
Set up a small design system with CSS variables. The .icon class defines a square box that inherits color from its parent, so you can theme icons with just color on a wrapper. Pseudo-elements will pick up the same currentColor, which keeps the icon set consistent.
/* CSS */
:root {
--icon-size: 24px;
--icon-stroke: 2px;
--icon-color: #1f2937; /* slate-800 */
--icon-accent: #2563eb; /* blue-600 */
--bg: #ffffff;
--text: #111827;
--muted: #6b7280;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
background: var(--bg);
}
.icon-demo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
padding: 24px;
max-width: 900px;
margin: 0 auto;
}
.icon-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #f9fafb;
}
.icon-label {
color: var(--muted);
}
.icon {
--size: var(--icon-size);
--stroke: var(--icon-stroke);
position: relative;
display: inline-block;
width: var(--size);
height: var(--size);
color: var(--icon-color);
}
/* Accessible button that only shows an icon visually */
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(var(--icon-size) + 16px);
height: calc(var(--icon-size) + 16px);
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #ffffff;
color: var(--icon-color);
cursor: pointer;
}
.icon-button:hover {
color: var(--icon-accent);
border-color: var(--icon-accent);
}
.icon-button:focus-visible {
outline: 2px solid var(--icon-accent);
outline-offset: 2px;
}
Advanced Tip: Keep stroke thickness, size, and color as variables. You can scale the entire icon system for a compact UI or a large touch target by changing –icon-size and –icon-stroke at a single place. This is also how you theme icons for light and dark modes.
Step 3: Building the Close (X) Icon
The close icon is two centered bars rotated in opposite directions. Pseudo-elements draw both strokes, pick up currentColor, and scale with the icon size variable. Rounded ends give a polished look on all pixel densities.
/* CSS */
.icon--close::before,
.icon--close::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: calc(var(--size) * 0.75);
height: var(--stroke);
background: currentColor;
border-radius: var(--stroke);
transform-origin: center;
}
.icon--close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.icon--close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
How This Works (Code Breakdown)
The .icon box sets a local square using –size, which defaults to 24px. Both pseudo-elements are absolutely positioned with left: 50% and top: 50% so we can transform from the middle. translate(-50%, -50%) centers each bar inside the icon box. width uses 75% of the icon box, which keeps comfortable padding around the strokes. height equals –stroke, so you can scale it up for a bolder icon without changing the layout.
Rounded ends come from border-radius: var(–stroke). The bars rotate 45 degrees and -45 degrees to form the X. The shape uses currentColor, so any color on the wrapper flows down to the icon. For more ways to build an X with borders and transforms, see how to make an X icon close button with CSS.
Step 4: Building the Chevron Right Icon
This chevron is two strokes that meet at a point. It uses the same technique as the close icon but anchors the bars along the right edge, not the center. That produces a classic > shape that remains sharp at any size.
/* CSS */
.icon--chevron-right::before,
.icon--chevron-right::after {
content: "";
position: absolute;
right: 50%;
top: 50%;
width: calc(var(--size) * 0.5);
height: var(--stroke);
background: currentColor;
border-radius: var(--stroke);
transform-origin: right center;
}
.icon--chevron-right::before {
transform: translate(50%, -50%) rotate(-45deg);
}
.icon--chevron-right::after {
transform: translate(50%, -50%) rotate(45deg);
}
How This Works (Code Breakdown)
Both bars share the same anchor: transform-origin: right center. Placing right: 50% and translate(50%, -50%) moves that anchor to the center of the icon box. Rotating one stroke up (-45deg) and the other down (45deg) forms the V shape. width uses half the icon size so the chevron breathes and looks balanced next to text. If your design calls for a lighter chevron, reduce –stroke; for a bolder chevron, increase it.
If you prefer triangle-based chevrons that rely on borders instead of bars, walk through how to make a chevron right with CSS, which shows a border-only method that also scales cleanly.
Advanced Techniques: Adding Animations & Hover Effects
Icons often carry state: focus, hover, pressed. Subtle motion can signal intent without visual noise. The key is to lean on transforms and opacity, which the compositor handles smoothly. Avoid animating shadows or large blur filters, as those are more expensive to paint.
/* CSS */
.icon--close {
transition: transform 160ms ease, color 160ms ease;
}
.icon--chevron-right {
transition: transform 160ms ease, color 160ms ease;
}
/* Hover: nudge the chevron right; rotate the X a touch */
.icon-card:hover .icon--chevron-right,
.icon-button:hover .icon--chevron-right {
transform: translateX(2px);
color: var(--icon-accent);
}
.icon-card:hover .icon--close,
.icon-button:hover .icon--close {
transform: rotate(8deg);
color: var(--icon-accent);
}
/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
.icon--close,
.icon--chevron-right,
.icon-button {
transition: none;
}
}
The transitions live on the .icon elements themselves, not the pseudo-elements. That makes the CSS simpler and reduces property churn. Because both icons use currentColor, color transitions require no extra selectors. The reduced motion media query disables movement for users who prefer a calmer UI.
Accessibility & Performance
Pure CSS icons give you total control over semantics and timing. You decide when the markup appears, when it paints, and how screen readers describe it. You also remove a network dependency that can stall icons on slow connections.
Accessibility
Decorative icons should not clutter the accessibility tree. Use aria-hidden=”true” on icons that accompany text labels, like the pairs in the .icon-card blocks above. For a button that only shows an icon, give the control an aria-label that describes the action, such as “Close dialog.” Keep focus styles visible on icon-only buttons with :focus-visible and a clear outline. If an icon toggles state, expose state with aria-pressed=”true|false” on the control.
For contrast, remember that icons inherit color from text. If you set a low-contrast color on a muted label, the icon will follow. Test color combinations against your background. If an icon conveys status, prefer a text label as well or include an aria-live announcement when the status changes.
Performance
Font icons cost one or more HTTP requests, plus a late font swap risk. When the font loads after initial paint, the browser may reflow the line box for that glyph. That can move nearby text and bump layouts. With pure CSS icons, the browser draws simple boxes, borders, and transforms that it already knows how to render. There is no font request, no glyph lookup, and no flash of missing icon.
For page weight, a single icon font often weighs tens of kilobytes compressed. If your UI shows five icons across common routes, that is overhead you pay on every visit even if you use only a handful of glyphs. The CSS in this article is under a kilobyte per icon pattern and merges well when you build a small set. The browser caches your main CSS with the rest of your styles, so there is no extra round trip.
Render cost for these patterns is low. Transforms on small elements animate on the compositor, which keeps frames steady. Avoid animating width or height on icons, since that can trigger layout. If you need many icons on one view, consider using the same .icon rules and switching only modifiers (.icon–close, .icon–chevron-right) so the CSS stays compact.
If you want to grow your set, many icons come from simple shapes. A magnifier is a circle with a handle; a play glyph is a triangle; an alert can use a triangle and a dot. For ready-made patterns that you can drop into this system, see how to make a magnifying glass icon with CSS. You can mix that with the same .icon base and variables used here.
Ship Icons Without a Font Request
You built a close icon and a chevron using only CSS, wired them for theming, and added motion that respects user preferences. You also saw exactly why these icons paint sooner than font icons: no webfont fetch, no glyph swap, no reflow.
With these patterns, you can grow a small, fast icon set that matches your brand. Start with a handful of geometric shapes and expand as needed, now you have the tools to ship icons that load as fast as your CSS.