Icons

FrankUI does not bundle a heavy set of custom icons to ensure the framework stays lightning-fast and tiny. Instead, we support seamless integration with modern, open-source libraries like Lucide Icons.

The Hitchhiker's Guide to the Galaxy Entry: Icons

The Hitchhiker's Guide to the Galaxy has this to say on the subject of icons: "Icons are small, colored pictures of things that are meant to look like other things, so that carbon-based lifeforms don’t have to waste valuable brain-processor cycles reading words. They are mostly harmless."

However, it is a monumentally, mind-bogglingly, catastrophically large fact that web designers love icons. Once, in a small and exceptionally neat corner of the digital universe known as frankui/, a developer set out to create a custom library of 800 hand-crafted vector shapes. Things started sensibly enough with envelopes and trash bins. However, before anyone could say "Where is my towel?", the design list had expanded to include a "semi-peeled banana", a "left-pointing corporate laser pointer", and a "support robot experiencing a severe existential crisis".

When the build script finished compiling this monumental collection, the resulting file was 4.8 Megabytes. To put this in perspective, 4.8MB is enough data to store the complete works of Vogon poetry (though why anyone would want to do so remains a mystery), or to make a simple browser tab consume more RAM than the supercomputer Deep Thought used to calculate the Ultimate Question of Life, the Universe, and Everything.

When the developer loaded the local test server, their laptop's cooling fans spun up to a speed normally reserved for atmospheric reentry. The developer stared at the existential crisis helper robot. The robot stared back, displaying an empty screen.

The Guide advises: DON’T PANIC. Rather than crushing our users' mobile browsers under the weight of 800 steel shipping containers of vector art, we decided to make FrankUI weigh exactly 100 kilobytes, and left the heavy lifting to the lovely people at Lucide Icons. If you need an icon, simply call their CDN. If you don't, you've saved enough bandwidth to coordinate a minor interstellar hyperspace bypass.

Icons in Buttons

Icons in Cards & Menus

Premium Security

Secure authorization templates are fully integrated with lightweight components.

Lightning Performance

Zero dependencies, synchronous rendering, and custom bundles keep load times low.

<!-- 1. Include Lucide Icons in your HTML <head> -->
<script src="https://unpkg.com/lucide@latest"></script>

<!-- 2. Use icons inside elements using `data-lucide` -->
<button class="btn primary">
    <i data-lucide="play" style="width: 16px; height: 16px;"></i> Play Video
</button>

<button class="btn alert">
    <i data-lucide="trash-2" style="width: 16px; height: 16px;"></i> Delete File
</button>

<!-- 3. Initialize icons at the bottom of the body -->
<script>
    document.addEventListener('DOMContentLoaded', () => {
        lucide.createIcons();
    });
</script>

Integration Guide

To integrate icons into your FrankUI projects, follow these simple steps:

Include the Lucide script tag: <script src="https://unpkg.com/lucide@latest"></script> in your footer or header templates.
Use standard elements (like <i> or <span>) with the attribute data-lucide="icon-name". You can search the full list of names on the Lucide Icons Directory.
Call lucide.createIcons() once the DOM loads to render the vector shapes inside your markup.