Crate lucide_slint 

crates.io · Documentation

Lucide Slint

Implementation of the lucide icon library for Slint.

Use lucide icons in your Slint applications with ease!

Features

🚀 Optimized Performance

All icons are pre-converted to Path element, eliminating runtime SVG parsing overhead for better performance and reduced memory footprint.

🎨 Full Property Support

All configuration properties from the official Lucide package are supported, giving you complete control over icon appearance.

Installation

Requirements

The latest version of lucide-slint requires Slint 1.15+.

Please ensure your project is using Slint 1.15 or later to avoid compatibility issues.

Rust (Cargo)

In an existing Slint project, run the following command to add lucide-slint as a build dependency:

cargo add lucide-slint --build

Add the following to your build.rs file to import lucide-slint as a Slint library:

use std::{collections::HashMap, path::PathBuf};

fn main() {
    let library = HashMap::from([(
        "lucide".to_string(),
        PathBuf::from(lucide_slint::lib()),
    )]);
    let config = slint_build::CompilerConfiguration::new()
        .with_library_paths(library);

    // Specify your Slint code entry here
    slint_build::compile_with_config("ui/main.slint", config)
        .expect("Slint build failed");
}

C++ (CMake)

For C++ projects using CMake, append the following to your CMakeLists.txt file to download and register the lucide-slint library:

# Download lucide-slint library
set(LUCIDE_SLINT "${CMAKE_CURRENT_BINARY_DIR}/lucide.slint")
if(NOT EXISTS "${LUCIDE_SLINT}")
  file(DOWNLOAD "https://github.com/cnlancehu/lucide-slint/releases/latest/download/lib.slint" "${LUCIDE_SLINT}" SHOW_PROGRESS)
endif()

# Specify your Slint code entry here
slint_target_sources(my_application ui/main.slint
  LIBRARY_PATHS lucide=${LUCIDE_SLINT}
)

Manual

Download the latest lib.slint from the releases page and place it in your project.

Usage

Then you can use lucide icons in your Slint files like this:

import { IconDisplay, IconSet } from "@lucide";

export component Example {
    IconDisplay {
        icon: IconSet.FilePlay;   // set the icon to display
        stroke: #c8f3e5;        // set the stroke color
        stroke-width: 1.5;        // set the stroke width
        size: 24px;               // set the icon size
    }
}

Or, you could just use icons with default size, stroke and stroke-width:

import { IconDisplay, IconSet } from "@lucide";

export component Example {
    IconDisplay {
        icon: IconSet.ScanText;
    }
}

Try stroke-fill property to get filled icons:

Note: The stroke-fill property only works for icons that have a defined fill area. Also, it is not guaranteed that all icons will look good when filled.

import { IconDisplay, IconSet } from "@lucide";

export component Example {
    VerticalLayout {
        IconDisplay {
            icon: IconSet.TreeDeciduous;
            stroke: #7faf6a;
        }

        IconDisplay {
            icon: IconSet.TreeDeciduous;
            stroke: #7faf6a;
            stroke-fill: #a1c88f;
        }
    }
}

Customize the icon display by inheriting IconDisplay to reuse your desired properties:

import { IconDisplay, IconSet } from "@lucide";

// My custom icon display component with purple stroke and a stroke width of 1.5
export component MyIconDisplay inherits IconDisplay {
    stroke: #8e8cd8;
    stroke-width: 1.5;
}

export component Example {
    VerticalLayout {
        MyIconDisplay {
            icon: IconSet.NotebookPen;
        }

        MyIconDisplay {
            icon: IconSet.LampDesk;
        }
    }
}

Reference

Icon Properties

These properties align with the standard Lucide icon configuration.

IconDisplay has the following properties:

Property	Type	Description	Default	Reference
icon	Icon	The specific icon to display from the IconSet enum	-	-
size	length	The size of the icon	24px	Sizing
stroke	brush	The stroke color of the icon	white	Color
stroke-fill	brush	The stroke fill color of the icon	transparent	Filled Icons
stroke-width	float (unit: px)	The stroke width of the icon	2	Stroke width
absolute-stroke-width	bool	Whether the size of the stroke width will be relative to the size of the icon.	false	Absolute stroke width

Icon Out properties

IconDisplay have the following out properties:

Property	Type	Description
calculated-stroke-width	length	The real stroke width of the icon calculated according to the stroke-width, size and absolute-stroke-width property

Available Icons

For a complete list of available icons, visit the Lucide Icons website.

To use an icon in Slint:

1. Find your desired icon: a-arrow-down
2. Click Copy Component Name to get the PascalCase name: AArrowDown

Example:

import { IconDisplay, IconSet } from "@lucide";

export component Example {
    IconDisplay {
        icon: IconSet.AArrowDown;
    }
}

Try it in SlintPad

Turn on the View - Properties panel and select the icon to modify icon properties with ease.

License

This project is licensed under the MIT License, while Lucide is licensed under the ISC License.

Functions

lib

Returns the file path to the lib.slint file included in this crate.