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.

⚠️ Notice

Lucide Slint 0.2.0 and later requires Slint 1.15+ (will be released in the future) or the master branch.

For Slint 1.14.x, please use Lucide Slint 0.1.4 and refer to its documentation.

Lucide Slint 0.2.0 depends on features introduced in this PR, which is not yet released in the stable version.

Installation

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://pkg.lance.fun/go/lucide-slint/latest/lib.slint" "${LUCIDE_SLINT}" SHOW_PROGRESS)
endif()

# Register the library path
slint_target_sources(my_application ui/app-window.slint
  LIBRARY_PATHS lucide=${LUCIDE_SLINT}
)

Usage

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

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

export component Example {
    IconDisplay {
        icon: IconSet.Play; // set the icon to display
        stroke: #5E72E4;  // set the stroke color
        size: 48px;         // set the icon size
        stroke-width: 2;    // set the stroke width
    }
}

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

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

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

Reference

Icon Properties

These properties align with the standard Lucide icon configuration.

IconDisplay has the following properties:

Icon Out properties

All icons have the following out properties:

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.