repository·main·Indexed 41 days ago
https://github.com/dioxus-community/dioxus-free-iconsA crate providing easy access to a wide variety of free SVG icon sets for Dioxus projects, including Bootstrap, Codicons, Font Awesome, Feather, Octicons, Heroicons, Ionicons, Lucide, and Material Design Icons. It features an Icon component for rendering SVG elements and an IconShape trait for implementing custom icons.
To use dioxus-free-icons in your Dioxus project, add the crate to your Cargo.toml. You must enable the specific features for the icon sets you wish to use (e.g., font-awesome-brands).
[dependencies]
dioxus-free-icons = { version = "0.9", features = ["font-awesome-brands"] }hello-dioxus package serves as a template for starting a Dioxus project. To run the project in development mode with hot reloading, use the dioxus serve command provided by the dioxus-cli.dioxus serveThe dioxus-free-icons library provides a collection of Feather icon components as Rust structs. Each icon implements the IconShape trait, allowing them to be rendered within a Dioxus application.
Each icon struct (e.g., FiGithub, FiGlobe, FiHeart) is a zero-sized type that carries the SVG path data and metadata required for rendering. These components are designed to be used within rsx! macros to display vector graphics.
Commonly available Feather icons include:
FiGithubFiGitlabFiGlobeFiGridFiHardDriveFiHashFiHeadphonesFiHeartFiHelpCircleFiHexagonFiHomeFiImageFiInboxFiInfoFiInstagramFiItalicFiKeyFiLayersFiLayoutFiLifeBuoyFiLink / FiLink2FiLinkedinFiListFiLoaderFiLockFiLogIn / FiLogOutFiMailFiMap / FiMapPinFiMaximize / FiMaximize2FiMehFiMenuFiMessageCircle / FiMessageSquareFiMicOffEach Feather icon struct (e.g., FiCamera) implements the IconShape trait, which defines the following SVG properties:
"0 0 24 24")."http://www.w3.org/2000/svg").(&str, &str, &str) representing (fill, stroke, stroke_width). The fill is typically "none", the stroke is the user_color provided, and the stroke_width is typically "2"."round")."round").Element containing the icon's specific SVG paths and shapes via the rsx! macro.The dioxus-free-icons library provides individual icon components for Material Design. Each icon is a unit struct that implements the IconShape trait. You can use these structs directly within your Dioxus rsx! macros to render SVG icons.
Commonly available icons in this segment include:
MdAdd, MdAddBox, MdAddCircle, MdAddCircleOutline, MdAddLink (Add actions)MdArchive, MdInbox, MdMoveToInbox (Mail/Storage actions)MdBackspace, MdClear, MdDeleteSweep (Deletion actions)MdLink, MdLinkOff (Connection actions)MdContentCopy, MdContentCut, MdContentPaste (Content actions)MdCreate, MdDrafts, MdFlag, MdOutlinedFlag (Creation/Marking actions)MdBiotech, MdCalculate, MdInsights, MdInventory (Specialized/Data icons)MdBlock, MdBlockFlipped, MdPolicy (Restriction icons)MdForward, MdGesture, MdHowToReg, MdHowToVote, MdLowPriority, MdMail, MdMarkunread, MdNextWeek (Other UI indicators)The dioxus-free-icons library provides Material Design (MD) icons as Rust structs that implement the IconShape trait. You can use these structs directly within your Dioxus rsx! macros to render SVG icons.
Each icon struct (e.g., MdAccountTree, MdAdb, MdBluetoothAudio) represents a specific icon and handles its own view_box, xmlns, and SVG child_elements (paths, rects, etc.).
use dioxus::prelude::*;
// Assuming the icons are imported from the correct module
fn IconExample(cx: Scope) -> Element {
render! {
div {
// Using a Material Design icon
MdAccountTree {}
MdAdb {}
MdBluetoothAudio {}
}
}
}The md_av_icons module provides several Material Design icons related to audio and visual media as Dioxus components. Each icon is implemented as a struct that implements the IconShape trait. You can use these structs directly within your Dioxus application to render SVG icons.
Available icons in this segment include:
Md10k, Md1k, Md1kPlus, Md2k, Md2kPlus, Md3k, Md3kPlus, Md4k, Md4kPlus, Md5g, Md5k, Md5kPlus, Md6k, Md6kPlus, Md7k, Md7kPlus, Md8k, Md8kPlus, Md9k, Md9kPlus (Numeric/Counter icons)MdAddToQueue (Add to queue)MdAirplay (Airplay)MdAlbum (Album)MdArtTrack (Art track)MdAvTimer (AV timer)MdBrandingWatermark (Branding watermark)MdCallToAction (Call to action)MdClosedCaption, MdClosedCaptionDisabled, MdClosedCaptionOff (Closed captioning)MdControlCamera (Control camera)MdEqualizer (Equalizer)MdExplicit (Explicit content)MdFastForward, MdFastRewind (Playback controls)MdFeaturedPlayList, MdFeaturedVideo (Featured content)MdFiberDvr, MdFiberManualRecord, MdFiberNew, MdFiberPin, MdFiberSmartRecord (Fiber series)MdForward10 (Forward 10 seconds)use dioxus_free_icons::md_av_icons::MdAlbum;
fn MyComponent() -> Element {
rsx! {
// Assuming the icon is used within an Icon component that accepts IconShape
Icon { shape: MdAlbum }
}
}The dioxus-free-icons library provides Feather icons as individual Rust structs that implement the IconShape trait. Each icon can be used within a Dioxus application to render an SVG element.
Commonly available icons in this segment include:
FiRepeat (Repeat)FiRewind (Rewind)FiRotateCcw (Rotate Counter-Clockwise)FiRotateCw (Rotate Clockwise)FiRss (RSS)FiSave (Save)FiScissors (Scissors)FiSearch (Search)FiSend (Send)FiServer (Server)FiSettings (Settings)FiShare2 (Share 2)FiShare (Share)FiShieldOff (Shield Off)FiShield (Shield)FiShoppingBag (Shopping Bag)FiShoppingCart (Shopping Cart)FiShuffle (Shuffle)FiSidebar (Sidebar)FiSkipBack (Skip Back)FiSkipForward (Skip Forward)FiSlack (Slack)FiSlash (Slash)FiSliders (Sliders)FiSmartphone (Smartphone)FiSmile (Smile)FiSpeaker (Speaker)FiSquare (Square)FiStar (Star)FiStopCircle (Stop Circle)FiSun (Sun)FiSunrise (Sunrise)FiSunset (Sunset)FiTable (Table)FiTablet (Tablet)FiTag (Tag)The dioxus-free-icons library provides Feather icons as individual Rust structs that implement the IconShape trait. Each icon struct (prefixed with Fi) can be used within a Dioxus application to render SVG-based icons.
Commonly available icons in this segment include:
FiActivityFiAirplayFiAlertCircleFiAlertOctagonFiAlertTriangleFiAlignCenterFiAlignJustifyFiAlignLeftFiAlignRightFiAnchorFiApertureFiArchiveFiArrowDownCircleFiArrowDownLeftFiArrowDownRightFiArrowDownFiArrowLeftCircleFiArrowLeftFiArrowRightCircleFiArrowRightFiArrowUpCircleFiArrowUpLeftFiArrowUpRightFiArrowUpFiAtSignFiAwardFiBarChart2FiBarChartFiBatteryChargingFiBatteryFiBellOffFiBellFiBluetoothFiBoldFiBookOpenFiBookFiBookmarkFiBoxFiBriefcaseFiCalendarThe dioxus-free-icons library provides Feather icons as individual Rust structs that implement the IconShape trait. Each icon can be instantiated and used within Dioxus rsx! macros.
Commonly available Feather icons include:
FiCamera, FiCameraOffFiCheck, FiCheckCircle, FiCheckSquareFiChevronDown, FiChevronLeft, FiChevronRight, FiChevronUp, FiChevronsDown, FiChevronsLeft, FiChevronsRight, FiChevronsUpFiCloud, FiCloudRain, FiCloudSnow, FiCloudDrizzle, FiCloudLightning, FiCloudOffFiCode, FiCodepen, FiCodesandboxFiCoffee, FiCpu, FiCreditCard, FiClipboard, FiCommand, FiCompass, FiCopy, FiChrome, FiCircle, FiClock, FiColumnsFiCornerDownLeft, FiCornerDownRight, FiCornerLeftDown, FiCornerLeftUp, FiCornerRightUp, FiCornerUpLeft, FiCornerUpRight, FiCornerDownLeftFiCast// Example usage of a Feather icon in Dioxus RSX
rsx! {
FiCamera {}
}The Icon component generates an SVG for a specific icon. You can customize its appearance using props like width, height, and fill. To use a specific icon, import it from its corresponding feature module (e.g., dioxus_free_icons::icons::fa_brands_icons).
use dioxus::prelude::*;
use dioxus_free_icons::icons::fa_brands_icons::FaRust;
use dioxus_free_icons::Icon;
fn RustIcon() -> Element {
rsx!(
Icon {
width: 30,
height: 30,
fill: "black",
icon: FaRust,
}
)
}The crate provides access to various icon sets via Cargo features. You can check icon names and designs on the react-icons site.
Available features include:
bootstrapcodiconsfont-awesome-brandsfont-awesome-regularfont-awesome-solidfeatherocticonshero-icons-outlinehero-icons-solidioniconslucidematerial-design-icons-actionmaterial-design-icons-alertmaterial-design-icons-avmaterial-design-icons-communicationmaterial-design-icons-contentmaterial-design-icons-devicematerial-design-icons-editormaterial-design-icons-filematerial-design-icons-hardwarematerial-design-icons-homematerial-design-icons-imagematerial-design-icons-mapsmaterial-design-icons-navigationmaterial-design-icons-notificationmaterial-design-icons-placesmaterial-design-icons-socialmaterial-design-icons-toggle