Luminescent UI provides a comprehensive set of logo components for popular Minecraft server platforms and community tools. All logos are available as SVG components in both React and Qwik packages.
Available Logos All logo components accept standard SVG props and support custom sizing through the size prop.
Birdflop Community performance optimization tools
Discord Popular community chat platform
Fabric Lightweight modding framework
Forge Popular modding platform for Minecraft
Luminescent Luminescent branding logos (icon and full)
Paper High-performance Minecraft server software
Pterodactyl Game server management panel
Purpur Feature-rich Paper fork
Velocity Modern Minecraft proxy
Waterfall BungeeCord fork for proxying
Usage import { LogoBirdflop , LogoDiscord , LogoFabric , LogoForge , LogoLuminescent , LogoLuminescentFull , LogoPaper , LogoPterodactyl , LogoPurpur , LogoVelocity , LogoWaterfall } from '@luminescent/ui-react' ; export function MyComponent () { return ( < div className = "flex gap-4 items-center" > < LogoLuminescent size = { 48 } /> < LogoPaper size = { 48 } /> < LogoVelocity size = { 48 } /> </ div > ); }
Props All logo components accept the following props:
Prop Type Default Description sizenumber- Width and height of the logo in pixels ...propsSVGAttributes- All standard SVG element attributes
Logos inherit the current text color via fill="currentColor". Use text color utilities to style them: < LogoPaper size = { 48 } className = "text-blue-500" />
Special Variants Luminescent Logos The Luminescent branding includes two variants:
LogoLuminescent - Icon-only logo (square aspect ratio)LogoLuminescentFull - Full wordmark logo (wide aspect ratio)
< LogoLuminescent size = { 64 } /> < LogoLuminescentFull size = { 64 } />
For the full wordmark logo, the size prop sets the height. The width scales automatically to maintain aspect ratio.
Accessibility When using logos, consider adding accessible labels:
< LogoPaper size = { 48 } aria-label = "Paper Server Software" role = "img" />
Examples Logo Grid < div className = "grid grid-cols-5 gap-6 p-8" > < LogoBirdflop size = { 64 } /> < LogoDiscord size = { 64 } /> < LogoFabric size = { 64 } /> < LogoForge size = { 64 } /> < LogoPaper size = { 64 } /> < LogoPterodactyl size = { 64 } /> < LogoPurpur size = { 64 } /> < LogoVelocity size = { 64 } /> < LogoWaterfall size = { 64 } /> < LogoLuminescent size = { 64 } /> </ div >
Colored Logos < div className = "flex gap-4" > < LogoPaper size = { 48 } className = "text-amber-500" /> < LogoPurpur size = { 48 } className = "text-purple-500" /> < LogoVelocity size = { 48 } className = "text-cyan-500" /> </ div >
Responsive Sizing < LogoLuminescent size = { 48 } className = "w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20" />