UD5 Toolkit
Text Watermark on Image - Online Add Subtle Overlay
Add a repeating diagonal text watermark to your images. Adjust opacity, font, and color. Protect your photos locally.
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>.
Text Overlay on Image - Online Add Caption & Watermark
Upload an image, write text, and place it anywhere. Choose font, size, and color. Download the combined image. Private.
Text Watermark Tile Generator - Online Pattern Overlay
Create a repeating text pattern from a short string for watermarking documents or images. Download SVG pattern.
Image to Pure ASCII - Online High‑Contrast Text Art
Turn a photo into a high‑contrast ASCII art using only standard text characters. Adjust brightness and character set. Works offline.
Image to CSS Background - Online Convert Photo to Pattern
Convert a small image into a CSS background‑image data URL or a tiled pattern snippet. Speed up your website with inline assets.
SVG to PNG Converter - Online Vector to Raster Image
Convert scalable SVG images to standard PNG files with a custom resolution. Works offline; just paste SVG code or upload an .svg file. Private and reliable.
Dice Probability Calculator - Online Sum Distribution & Odds
Calculate probability of getting a specific sum when rolling multiple dice. Visual bar chart. Useful for tabletop RPG players. Instant local computation.
Median Filter Denoiser – Online Remove Salt & Pepper Noise
Apply a simple median filter to remove speckle noise. Adjust kernel size. Fully local canvas processing.
Text to Old English Translator - Online Fake Medieval
Make modern English sound like ye olde speech. Simple pattern replacement. Great for RPGs and fun.
Text to Hex Converter - Online String to Hexadecimal Encoder
Convert any text string to a sequence of hexadecimal pairs. Useful for programming and data representation. All conversion happens locally in your browser.
Image to SVG Path - Online Trace Bitmap to Vector
Convert a simple black and white image into an SVG path using edge detection. Extract vector outlines. Local canvas processing.
Hex to Text Converter - Online Hexadecimal Decoder
Decode hexadecimal values back to human-readable text. Ideal for debugging and data recovery. Works fully offline in your browser, keeping your data secure.
Random Unsolicited Advice - Online Wise & Silly
Get a piece of either wise or hilariously useless advice. Instant life tips. Pure fun.
English Irregular Verb Quiz – Online Past Tense Practice
Randomly given base form, type past simple and past participle. Score tracking.
IQR Calculator - Online Interquartile Range & Box Plot
Enter a dataset to compute Q1, median, Q3, IQR, and highlight outliers. Visual box plot generated in canvas.
Image Negative Filter - Online Invert Colors Photo
Apply a true negative color effect to your image. Simulate a film negative or invert scanned documents. Instant canvas transformation.
Signed Magnitude Converter - Online Negative Binary Numbers
Encode decimal integers into signed magnitude binary representation and decode back. Learn computer arithmetic.
Air Plant Soaking Timer – Online Weekly Tillandsia Care
Set weekly reminders to soak your air plants. Timer and drying instructions included.
Reptile Humidity Guide – Online Daily Misting Reminder
Select species and see ideal humidity range. Set a reminder to mist enclosure. Keep scales healthy.
CSS Scroll Snap Generator - Online Visual Builder
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
Color to OKLCH Converter - Online Perceptually Uniform
Convert hex, RGB, or HSL into the modern OKLCH color space. See the preview and copy CSS oklch() value. Local.
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.
CSS Variable Theme Switcher - Online Dark/Light Generator
Design a light and dark theme by picking colors for backgrounds, text, and links. Get the CSS for both themes. Local.
Text Decoration CSS Generator - Online Underline & Strike
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
CSS Opacity & RGBA Generator - Online Transparency Tool
Adjust opacity visually with a slider and see the different CSS representations (opacity property vs RGBA/HSLA). Copy best option.
Mix‑Blend‑Mode Playground - Online CSS Effect Tester
Pick two images or colors and apply all 16 CSS mix‑blend‑mode values live. See and copy the right CSS for your design.
Custom Scrollbar CSS Generator - Online Firefox & Webkit
Design a fully styled scrollbar with colors, width, radius, and hover effects. Supports both ::-webkit‑scrollbar and Firefox scrollbar‑width.
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.
Responsive Text CSS Generator - Online Fluid Typography
Create CSS clamp() values for fluid typography. Enter min and max font sizes and viewport widths. Modern responsive design.
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.