1300+ Handcrafted, Pixel-style Minecraft UI Icons – McIcons.css

McIcons is a CSS icon library that provides 1300+ handcrafted, pixel-style, Minecraft-themed icons for your web project.

The library is useful for Minecraft-related web projects or user interfaces that need blocky, retro icons. You can drop in an icon with a single line of HTML, no extra JS required.

Features

• 1300+ handcrafted pixel-art icons covering Minecraft items, blocks, and UI elements
• CSS class-based implementation for easy integration
Sponsored
• Five predefined size options from 1rem to 5rem
• CDN hosting for quick deployment
• PNG format downloads available for non-CSS implementations
• Laravel ServiceProvider for PHP framework integration
• Zero JavaScript dependencies – pure CSS solution

How to use it:

1. Download the McIcons package and include the stylesheet in your HTML document:

<link rel="stylesheet" href="/css/mcicons.css">

<!-- OR FROM CDN -->
<link rel="stylesheet" href="https://cdn.mcicons.dev/releases/v1.0.0/css/all.css">

2. Browse the official McIcons library to find your desired icon.

3. Add an <i> tag (or <span>) with the appropriate classes to your HTML:

<i class="mc mc-acacia-chest-boat"></i>

4. Available utility classes for sizing. The default size with just .mc is 1.5rem.

• .mc-sm: 1rem
• .mc: 1.5rem (default)
• .mc-xl: 2rem
• .mc-2xl: 2.5rem
• .mc-3xl: 3rem
• .mc-4xl: 4rem
• .mc-5xl: 5rem

<i class="mc mc-acacia-chest-boat mc-xl"></i>

5. If you prefer not to use CSS classes or need more control, the downloaded package contains all icons as PNG files (in the public/icons/ directory). You can embed these using standard <img> tags:

<img src="/path/to/mcicons/public/icons/acacia-chest-boat.png" alt="Acacia Chest Boat">

The post 1300+ Handcrafted, Pixel-style Minecraft UI Icons – McIcons.css appeared first on CSS Script.