McIcons.css: Minecraft UI Icon Library With 1300+ Pixel-style Icons

McIcons.css is a CSS icon library that adds Minecraft-style pixel icons to HTML through class-based markup.

The package includes 1300+ PNG icons for blocks, items, and UI-style assets, with CDN loading, Composer installation, Laravel asset publishing, and size utility classes.

The library works well in Minecraft fan sites, game dashboards, server panels, resource pages, and retro interfaces that need blocky icons without JavaScript.

Features:

• 1300+ handcrafted Minecraft-style PNG icons.
• Uses CSS classes for inline HTML icon placement.
• Supports CDN setup for browser-based projects.
• Provides Composer installation for PHP projects.
• Includes a Laravel ServiceProvider for asset publishing.
• Ships the original PNG files for image-based workflows.
• Provides size utility classes from 1rem to 5rem.
• Requires no JavaScript for basic icon rendering.

How to use it:

CDN setup

Load the compiled stylesheet from the project CDN when you want the fastest browser setup.

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

Add an icon

Each icon uses the base .mc class plus a named icon class.

<i class="mc mc-diamond-sword"></i>
<i class="mc mc-anvil"></i>
<i class="mc mc-apple"></i>

Change icon size

Add a size utility class after the icon name to control the rendered size.

<i class="mc mc-diamond-sword mc-2xl"></i>

Laravel and Composer setup

Install the package with Composer when the icons belong in a PHP or Laravel project.

composer require themuhamed/mcicons

Publish the assets in Laravel, then load the published CSS path from your layout.

php artisan vendor:publish --tag=mcicons-assets

Manual local setup

For non-Laravel projects, copy the stylesheet and icon folder into your public assets directory.

mkdir -p public/vendor/mcicons
cp -r vendor/themuhamed/mcicons/resources/css/mcicons.css public/vendor/mcicons/
cp -r vendor/themuhamed/mcicons/public/icons public/vendor/mcicons/

Use icons as PNG files

The package stores the original PNG icon assets in the public/icons/ directory. Use this path when CSS classes do not fit your rendering workflow.

<img src="/vendor/mcicons/icons/diamond-sword.png" alt="Diamond Sword icon">

Implementation Notes:

• Use CSS class icons inside buttons, navigation links, labels, item lists, and small UI controls.
• Use PNG files when you need direct image paths for canvas previews, custom loaders, downloads, or build-time processing.
• Check the icon browser before writing markup, because each icon class follows the file name pattern.
• Add visible text or an aria-label when an icon acts as the only label for a control.
• Use alt="" for decorative PNG icons, and use descriptive alt text for icons that communicate content.

Related Resources:

• Minecraft.css Web Design Framework
• CSSScript Icon Resources
• Neu CSS UI Icons
• css.gg CSS Icons
• theSVG Brand Icons

FAQs:

Does McIcons.css require JavaScript?

No. McIcons.css uses CSS classes and PNG icon assets, so you do not need JavaScript for basic icon rendering.

How do I change the size of a McIcons icon?

Add one of the size classes, such as .mc-sm, .mc-xl, or .mc-5xl, after the base icon class.

Why is my icon not visible?

Check that the stylesheet loads before the icon markup renders. Also confirm that the icon class matches a real icon name from the icon browser.

Should I use CSS classes or PNG files?

Use CSS classes for normal HTML UI. Use PNG files when you need image paths for custom rendering, downloads, previews, or build-time processing.