UD5 Toolkit
CSS Subgrid Layout Builder - Online Align Nested Grids
Design a layout where nested grids share track sizes with their parent via subgrid. Copy the complete CSS.
Font Awesome Cheatsheet - Online Icon Search & Copy
Font Awesome 6
Font Awesome Cheatsheet
Search, browse & copy Font Awesome icons instantly. Free & open-source icon toolkit.
Copy as:
No icons match your search. Try different keywords!
Tip: Search for "arrow", "user", "file", or "heart"
Copied!
Frequently Asked Questions
Font Awesome is the world's most popular icon toolkit, offering over 2,000+ free vector icons that can be used in web projects. It uses scalable vector graphics (SVG) via CSS, meaning icons look sharp at any size and resolution. Benefits include: lightweight performance, easy customization (color, size, animation), wide browser support, and seamless integration with frameworks like Bootstrap, React, Vue, and Angular.
The easiest way is via CDN. Add this line to your HTML
Alternatively, you can install via npm:
<head>:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">Alternatively, you can install via npm:
npm install @fortawesome/fontawesome-free and import it in your JavaScript/CSS bundle.
Solid (
Regular (
Brands (
Note: Regular icons are a subset; not all Solid icons have a Regular counterpart.
fa-solid): Filled icons with a bold, heavy appearance — most commonly used for UI elements like buttons and navigation.Regular (
fa-regular): Outlined/line-style versions of select icons — lighter visual weight, great for secondary actions.Brands (
fa-brands): Official logos of companies and platforms (GitHub, Twitter, Google, etc.) — available only in brand style.Note: Regular icons are a subset; not all Solid icons have a Regular counterpart.
You can use built-in sizing classes like
fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, up to fa-10x. For color, simply apply CSS color property to the <i> tag or use utility classes like text-primary, text-danger, etc. Example: <i class="fa-solid fa-heart fa-2x text-danger"></i>.
Font Awesome 6 Free includes over 2,000 icons across Solid, Regular, and Brands styles — completely free for personal and commercial use.
Font Awesome 6 Pro adds 16,000+ more icons, additional styles (Light, Thin, Duotone, Sharp), and advanced features like icon layering, animated icons, and premium support. For most projects, the free version is more than sufficient.
Font Awesome 6 Pro adds 16,000+ more icons, additional styles (Light, Thin, Duotone, Sharp), and advanced features like icon layering, animated icons, and premium support. For most projects, the free version is more than sufficient.
Absolutely! For React, use
className instead of class: <i className="fa-solid fa-home"></i>. For Vue and Angular, the standard HTML syntax works natively. There are also official Font Awesome component libraries: @fortawesome/react-fontawesome, @fortawesome/vue-fontawesome, and @fortawesome/angular-fontawesome for more advanced usage with tree-shaking.
Some of the most popular icons include: home, user, search (magnifying-glass), heart, star, envelope, phone, bars (hamburger menu), shopping-cart, cog (settings), arrow-right, check, xmark (close), download, upload, trash, edit (pen-to-square), plus, minus, and brand icons like github, twitter, facebook. Use the search above to find them quickly!
For decorative icons, add
aria-hidden="true" to the <i> tag so screen readers ignore them. For semantic icons (like a search button), wrap the icon in a button with an aria-label or include hidden text. Example: <button aria-label="Search"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></button>.
Scroll Progress Bar Generator - Online CSS‑Only
Create a pure CSS scroll progress indicator using animation‑timeline: scroll(). No JavaScript. Copy the complete code.
CSS Compatibility Linter - Online Check Browser Support
Paste your CSS and see warnings for properties that have limited browser support. Links to CanIUse. Modernize safely.
SVG URI Encoder - Online Optimized for CSS Background
Paste an SVG and get an optimized, URL‑encoded data URI for use in CSS backgrounds. Reduces file size and escapes characters.
touch‑action CSS Playground - Online Gesture Control
Limit browser gestures on an element: pan‑x, pinch‑zoom, manipulation. Draw on a canvas to test. Mobile dev helper.
Advanced CSS Gradient Builder - Online Multi‑Stop & Angle
Create complex linear gradients with any number of color stops, exact angles, and length units. Live preview and CSS code.
Text Decoration CSS Generator - Online Underline & Strike
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
Random Box Model Snippet - Online CSS Layout Practice
Generate a random HTML/CSS card with different box model properties. Inspect and guess the size. For learners.
CSS Glow Hover Effect - Online Animated Box Shadow
Design a button or card that glows on hover. Adjust shadow color, spread, and transition. Copy the CSS. Rich UI.
Box Shadow Playground - Online Visual CSS Shadow Editor
Interactively add and adjust multiple box shadows on a sample element. Drag sliders for offset, blur, spread, and color. Copy the clean CSS code instantly.
CSS Letterpress Text Effect - Online Inset Typography
Create a realistic letterpress (debossed) text effect using CSS text‑shadow and background. Adjust depth and light direction. Copy code.
Noise Texture & Grain Generator - Online CSS Background
Generate a subtle noise/grain texture as a CSS background pattern. Adjust opacity and size. For that film look.
CSS Checkerboard Pattern - Online Background Generator
Create a customizable checkerboard or grid background using pure CSS gradients. Adjust cell size and colors. Copy the code.
Image Blend Mode Tester - Online Overlay Two Photos
Upload two images and apply CSS blend modes (multiply, screen, overlay, etc.). See the result and copy the filter CSS. Pure frontend.
Print CSS Generator - Online Optimize Page for Paper
Add print styles like removing backgrounds, adding page breaks, setting margins. See print preview instantly.
CSS Countdown Number Animation - Online Flip Clock Effect
Create a pure CSS countdown timer with a flipping number effect. Adjust duration and style. No JavaScript needed for display.
Animated Border CSS Generator - Online Glow & Rotate
Create a glowing or rotating border animation around an element. Copy the CSS keyframes. Pure CSS magic.
CSS Progress Bar Generator - Online Animated & Styled
Create a custom HTML/CSS progress bar with percentage, colors, and animation. Copy the code. Modern UI element.
Neon Sign Text Effect - Online Glowing CSS Generator
Design a realistic neon sign text with multiple layers of glow. Copy the CSS and HTML. Perfect for headers.
Flexbox Froggy Simulator - Online Learn CSS Flexbox Game
A replica of the famous Flexbox Froggy game: solve alignment puzzles by writing CSS. Progress saved locally. Fun frontend learning.
Website Color Theme Extractor - Online Grab Palette from CSS
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
Gradient Match Game - Online Drag & Match Linear CSS
Recreate the target CSS linear gradient by adjusting stops and colors. A unique game for front‑end developers to master gradients.
Docker Commands Cheatsheet - Online Quick Reference
A searchable list of essential Docker CLI commands for managing containers, images, and volumes. Copy-paste friendly. Always handy.
Git Cheatsheet - Online Common Commands Reference
Quick reference for frequently used Git commands with examples. Searchable and categorized. A handy resource for all developers.
Gradient Text CSS Generator - Online Colorful Text Style
Create text with a gradient fill using CSS background-clip. Configure colors and direction. Copy the code. Works in modern browsers.
HTML Color Names - Online Complete List with Hex & Preview
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
Flexbox Playground - Online CSS Flex Layout Generator
Visually experiment with Flexbox container and item properties. See the layout update in real time and copy the CSS. Learn by doing, fully interactive.
Online Code Minifier - JS & CSS Compression Tool
Minify JavaScript and CSS code to reduce file size for production. Remove whitespace and comments instantly. Run locally, your code stays private.
Border Radius CSS Generator - Online Rounded Corners Tool
Easily create asymmetric border radius values and preview the result. Copy the generated CSS instantly. All interactively and browser-based.
CSS Beautifier & Formatter - Online CSS Organizer
Beautify and format your CSS stylesheets instantly. Organize, minify, or prettify CSS code for better readability. Processed securely on client-side.