Svelte icons. 0, last published: 7 months ago.

Svelte icons. There are 4 other projects in the npm registry using svelte-material-icons. With icons it can become particularly unnecessary as you probably don't need to edit the SVG markup. Tiny FontAwesome component for Svelte. svelte component that gets a name and outputs a xlink-ed SVG. You can copy to clipboard entire component in Svelte format along with Typescript support or SVG format. Start using lucide-svelte in your project by running `npm i lucide-svelte`. svelte' Font Awesome SVG Icon components for Svelte. Accessible SVGs A11y props, title, desc, and ariaLabel for accessible SVG icons. Consistent design and quality across all icons. Some icons, such as emoji, have a hardcoded palette that cannot be changed. com/tailwindcss@2. svelte file per icon as they can slow down Vite's dependency optimization. 0, last published: 4 years ago. It's a compiler that takes your declarative components and converts them into efficient JavaScript Contributions welcome. If you use it in a commercial project, please support me by sponsoring me on GitHub sponsor. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). 2. For Vue 2 use the lucide-vue package. 📦 This package provides the Simple Icons packaged as a set of Svelte components. This repository contains scripts to port the entire free-icons set to Svelte and generates npm packages to be used in your Svelte projects. " Optimized Compilation: Import only necessary icons to improve compilation speed and performance. 0. This way you save file size without sacrificing color customization capabilities. Import the icon from the carbon-icons-svelte/lib folder. 0 310+ Radix SVG icon components for Svelte. . There are 48 other projects in the npm registry using @iconify/svelte. Usage v3. Flowbite icon components for Svelte 5 Runes. Start using svelte-icons in your project by running `npm i svelte-icons`. There are 23 other projects in the npm registry using svelte-icons. Feather icons for Svelte (Completely based on vue-feather-icons by EGOIST). I always use a SVG sprite with icons grouped via ids and an Icon. It details how the Lucide icon system is adapted for use in Svelte applications, including the component architectur Free Download 25 Free Svelte Vector Icons for commercial and personal use in Canva, Figma, Adobe XD, After Effects, Sketch & more. Dec 11, 2022 · The Best Icon Library For Svelte Published Dec 11, 2022 Table of Contents Iconify Iconify Iconify is a framework agnostic icon library that includes every popular icon set — you can use Icônes to explore icons and copy them directly as SVG if you want. Open-source project and a fork of Feather Icons. Official library for the free and open-source collection of over 430+ SVG icons for Flowbite and Svelte - themesberg/flowbite-svelte-icons Universal icon framework. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes. " Svelte Icons Combines Heroicons V2 → & Simple Icons → as easy to use SVG components in your svelte project. Icon components for svelte. The AST is not public API and may change at any point in time Jul 23, 2025 · SVG Icons are used in Svelte applications for creating scalable, high-quality graphics that can be easily styled and animated. Tabler Icons library for Svelte framework. Ionicons for Svelte. dev/repl/c0045886b264408fba13f1de70c42932?version=3. Tabler Icons: 5963 free and open source SVG icons. These are the Material Icons for Svelte. By default, icon height is set to " 1em ", icon width is changed dynamically based on the icon's width/height ratio. MembersOnline Icons not showing up? Make sure you've installed both @hugeicons/svelte and @hugeicons/core-free-icons Check that the icon names are correctly imported TypeScript errors? Ensure your tsconfig. With its extensive library of customizable SVG icons, easy integration, and Free Svelte icons, logos, symbols in 50+ UI design styles. Latest version: 5. 3, last published: 6 days ago. 3 with MIT licence at our NPM packages aggregator and search engine. There are 11 other projects in the npm registry using svelte-radix. Svelte is a radical new approach to building user interfaces. This library simply makes it easier to import each icon and have it scale based on it's inherited font-size. Learn how to use icons in Svelte projects with CSS or Svelte libraries. 0, last published: 15 days ago. TailwindLabs Heroicons for Svelte 4, 5, and RunesAccessible SVGs A11y props, title, desc, and ariaLabel for accessible SVG icons. Accessible SVGs A11y props, title, desc, and ariaLabel for accessible SVG icons. com/mono-icons@1. 0, last published: 7 months ago. Svlete-Heros support major CSS framework. svelte-free-icons The free-icons set is a collection of over 23,000 freely available icons for various design projects. github. There are no other projects in the npm registry using svelte-remixicon. 19/dist/tailwind. an open-source collection of smooth, animated icons for your projects. This makes it easy to change icon size by changing font-size in the stylesheet or in style, just like icon fonts: Skeleton is an adaptive design system powered by Tailwind CSS. The icon component is compatible with multiple common icon fonts such as Material Design Icons, Font Awesome and more. FontAwesome version 5 and 6 FontAwesome svg icons Tree-shakable, only import used icons No CSS file required FontAwesome layering FontAwesome duotone icons Documents and examples. Get started with a collection of solid styled open-source Svelte 5 powered icons built by the Flowbite community and use the interactive search and configurator features The deployment for the NPM package (svelte-icons) is automated via travis CI, whereas the example is deployed manually via the examples directory, by running yarn deploy. It supports various icon libraries such as Font Awesome, Ionicons, Heroicons, and more. App. Summary: Flowbite Svelte Icons is a valuable open-source package for developers working with Svelte. 7. A simple CLI tool for Tagged with svelte, webdev, javascript. Context API setContext and getContext Special elements <svelte:element> <svelte:window> <svelte:window> bindings <svelte:document> 🌏 Universal 🤹 Any icon sets - ~150 popular sets with over 200,000 icons, logos, emojis, etc. Contribute to leshak/svelte-icons-pack development by creating an account on GitHub. There are 122 other projects in the npm registry using lucide-svelte. Custom icons - Svelte Lucide You can create a custom default icon, by using Icon: Create a custom component Create a Svelte component named src/lib/MyIcon. Learn how to get started with the free and open-source Flowbite Svelte UI component library based on the utility classes from Tailwind CSS Description Svelte Components for Heroicons & Simple Icons " svelte-icons combines Heroicons & Simple Icons for seamless use as SVG components in your Svelte project. SVG framework, React, Vue and Svelte components! A collection of animated SVG icons for Svelte with customizable draw transitions, events, and accessibility features. SVG Icons of Popular Icon Packs "Include popular icons in your Svelte projects easily with svelte-icons-pack, which utilizes ES6 imports that allows you to include only the icons that your project is using. There are 21 other projects in the npm registry using flowbite-svelte-icons. " Free Download 5,281 Svelte Icons for commercial and personal use in Canva, Figma, Adobe XD, After Effects, Sketch & more. This can optimize compilation speed and improve performance by reducing the amount of code Icon Library for Svelte/SvelteKitDescription Icon Library for Svelte/SvelteKit "If you're looking for a way to add visually stunning icons to your Svelte/SvelteKit project, you're in luck! svelte-remixicon is a comprehensive icon library built with the popular Remix Icon pack. Feb 2, 2019 · var root_1 = $. - aantusahaa/svelte-remixicon Svelte-Awesome Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Start using svelte-icons-pack in your project by running `npm i svelte-icons-pack`. There are 19 other projects in the npm registry using svelte-feather-icons. Beautiful & consistent icon toolkit made by the community. Feb 14, 2025 · Create Svelte components from Iconify SVG icons with type-safe support. See the Icon Index for a list of SvelteKit SVG icons: how you can easily get SVG icons in your ️ Svelte app from just about any library by adding just one single dependency. Contribute to shinokada/svelte-radix development by creating an account on GitHub. Based on Justineo/vue-awesome Svelte-Awesome supports Font-Awesome v4. Start using svelte-material-icons in your project by running `npm i svelte-material-icons`. Compare the features, formats, integrations, and numbers of icons of Lineicons, Svelte-Heroicons, Iconify, Lucide, Circum, Carbon, and Svelte Feather. Svelte Thanks to the open-source community from Svelte - the Flowbite Icons collection is now also available to be used in Svelte projects by installing the official Svelte icons package built by shinokada. Start using svelte-awesome-icons in your project by running `npm i svelte-awesome-icons`. 5/iconfont/icons. There are 4 other projects in the npm registry using svelte-icons-pack. With more than 2000 icons available, you'll have plenty of options to choose from to bring some color and personality Bootstrap SVG icons as Svelte components. An open-source Svelte component library for building high-quality, accessible design systems and web apps. There are 3 other projects in the npm registry using flowbite-svelte-icons. Easily copy paste SVG code OR download free SVG, PNG for commercial projects no attribution required. Available in line, flat, gradient, isometric, glyph, sticker & more design styles. See full list on iconify. I keep on switching between different libraries since I use tailwind and other stuff like Daisy UI for theming and components. 1, last published: 22 days ago. Svelte Icons Svelte Icons Why this package? Copying SVG code into your project can become tedious and messy. Svelte Icon SVG vector & PNG transparent. Available for React, SolidJS, Vue, Figma and more for free! Svg icons as Svelte components with props. Jul 17, 2025 · Compare top Svelte icon libraries that come with with tree-shaking support, TypeScript integration, and native Svelte components to optimize your project's performance and bundle size. Although best paired with carbon-components-svelte, these icons can be consumed standalone. Browse outline icons # Search by the icon name and you’ll find the component name that you need to import in your Svelte app. 1. 0, last published: 3 days ago. x <script> import { Icon } from 'svelte-icons-pack'; import { AiOutlineNodeExpand } from 'svelte-icons-pack/ai'; </script> <Icon src={AiOutlineNodeExpand} /> Icons You can add more icons by submitting pull requests or creating issues. It is an open-source collection of smooth, animated icons (based on the Lucide icons) for your projects. Powered by unplugin. Contribute to shinokada/svelte-ionicons development by creating an account on GitHub. Transformations This tutorial is part of Iconify for Svelte tutorial. Original source ionic-team/ionicons License Released under the MIT License. - icons-pack/svelte-simple-icons Thanks to the open-source community from Svelte - the Flowbite Icons collection is now also available to be used in Svelte projects by installing the official Svelte icons package built by shinokada. Checkout the changelog to see what's new. 1, last published: a month ago. 541. Start using flowbite-svelte-icons in your project by running `npm i flowbite-svelte-icons`. Other icons Svelte-Icon-Sets tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing Live Demos Test drive Skeleton directly in your browser for supported frameworks. Thank you for considering my open-source package. Start using svelte-remixicon in your project by running `npm i svelte-remixicon`. This way, only the icons that are imported into your project are included in the final bundle. GitHub repo Icon and Docs A collection of animated SVG icons for Svelte with customizable draw transitions, events, and accessibility features. Material Design Icons for Svelte. To change color of a monotone icon, simply change text color or use color attribute or add style with color. Avoid libraries that provide a . May 30, 2020 · I am writing a Server Side Rendered app with Svelte/Sapper and I am having trouble using Font Awesome fonts. 📦 Major build tools - Vite, Webpack, Rollup, Nuxt, Rspack, etc. Latest version: 2. Latest version: 3. To use the icons you can use the component wrapper for your framework but the recommended way is to use the web component version. An icon library for Svelte/SvelteKit based on Remix Icon. - steeze-ui/icons Svelte Icons Combines Heroicons V2 → & Simple Icons → as easy to use SVG components in your svelte project. Icon Components for various frameworks (svelte, lit, solid and react) Icon Packs (e. High quality, optimized, free. mi { A guide for using Svelte Awesome Icons with inline SVG and advanced icon registration. 4. Rotation by 90, 180 and 270 degrees. Contribute to shinokada/svelte-lucide development by creating an account on GitHub. IDE support If you are using an LSP-compatible editor, such as VSCode, Atom, Sublime Text, or Neovim, hovering over a component name will display a documentation link, features, props, events, etc. All transformations are done relative to the center of the icon. I have converted over 7000 icons from different IconSets - The JS code is only 800 Bytes GZipped beautifully crafted, moving icons. This can help optimize compilation speed and improve performance by reducing the amount of code processed during compilation. g heroicons, radix-icons, feathericons and more) A template to create your own publishable Icon Pack Now lives under an org that will focus on more ui tools for svelte Original source radix-ui/icons License Released under the MIT License. There are 24 other projects in the npm registry using svelte-icons. 0 (icons inbuilt) and v5 / v6 (via @fortawesome npm packages) A demo is available here A list of all available embedded icons is available here Icon dimensions This tutorial is part of Iconify for Svelte tutorial. Consists of more than 2800 icons. So far I have been unable to find a good looking, svelte native and regularly maintained icon library for my projects. There are two types of transformations: Horizontal and vertical flip. In this article, we'll explore two different approaches to importing and using SVG icons in a Svelte app, allowing for dynamic and interactive designs. Latest version: 4. Start using @iconify/svelte in your project by running `npm i @iconify/svelte`. May 23, 2025 · Import the desired icons directly into your Svelte file using the respective component names. css" > </ svelte: head> <style> . 🍱 Any combinations of them! ☁️ On-demand - Only bundle the icons you really A quick start for a Svelte Runes project. Feb 14, 2022 · Changed repo and icon names] If your project is using Svelte/SvelteKit and TailwindCSS, Svelte-heros library might be for you. Svelte themes, templates and resources categorized as icons. Svelte Icon Family Explore 29 Svelte SVG Icon Sets. Customizable size, color and stroke. 2, last published: 10 days ago. Start using svelte-feather-icons in your project by running `npm i svelte-feather-icons`. Boxicon set for Svelte Unplugin Icons is a plug-in that dynamically generates icon components. 48. 🚀 Major frameworks - Vanilla, Web Components, React, Vue 3, Vue 2, Solid, Svelte, and more. Apr 18, 2025 · This document covers the Svelte-specific implementation of the Lucide icon library. Get started with a collection of outline styled open-source Svelte 5 powered icons built by the Flowbite community and use the interactive search and configurator features Icon library for svelte? I have been dabbling in the svelte and sveltekit ecosystem for a while now. Each icon supports hover/click animations, customizable colors, sizes, and stroke widths. Jan 27, 2023 · Svelte Icons Download 6 Svelte Icons free Icons of all and for all, find the icon you need, save it to your favorites and download it free ! Animated Icon SetDescription Animated Icon Set " jis3r/icons offers beautifully crafted, moving icons for Svelte. I am using the following to load the font: &lt;script&gt; import Icon from "svelte-a For more details, see the documentation. Interactive Svelte playground// See this example too, https://svelte. Icon color This tutorial is part of Iconify for Svelte tutorial. Make sure that you have followed the Svelte 4 or Svelte 5 Icons guide from the documentation. css"/>`); Check Svelte-icons-pack 3. 5, last published: 2 years ago. Svelte themes, templates and resources categorized as svelte-icons. Contribute to metonym/svelte-bootstrap-icons development by creating an account on GitHub. An icon can be rotated and flipped horizontally and/or vertically. min. 0, last published: 3 months ago. g heroicons, radix-icons, feathericons and more) A template to create your own publishable Icon Pack Now lives under an org that will focus on more ui tools for svelte Svelte Icons Kit is a collection of collection of icons for Svelte apps or for any other SVG needs. Latest version: 0. svelte DynamicIcon. Iconify icon component for Svelte. svelte Icon. Svelte themes is a curated list of Svelte themes, templates and modules built using svelte, sveltekit, elderjs, routify etc. You can add additional CSS using the `class` props. Feb 5, 2021 · Option 3: create the SVG client-side with a <svg-icon> Custom Element from a string holding only d path data; see iconmeister. 3 package - Last release 3. " 250+ country flag icon components for Svelte Get started with Lineicons in Svelte projects. * Functional components limited to React and Svelte. About Hero Icons v2 for Svelte. Contribute to ramiroaisen/svelte-material-icons development by creating an account on GitHub. Icons Organization The free-icons contains 23661 icons grouped in the following way: 554 brand icons 3301 thin icons 3301 light icons 2000+ SVG icons from Font-Awesome for a Svelte 4, 5, and Runes project. You can select outline and solid icons using the variation props. " flowbite-svelte-icons is an open-source package providing 480+ SVG Flowbite icon components for Svelte. Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes Effortless Icon Packs & Components for Svelte, React, Vue and more. 2120+ SVG Google Materialdesign icon components for Svelte. Svelte Implementation of the lucide icon library for Svelte applications. You can use it to render icons if you are building an app using one of the following UI frameworks: Material UI Components for Svelte, ready to use in your app. Svelte themes, templates and resources categorized as material-icons. A Lucide icon library package for Svelte applications. Original source lucide-icons/lucide License Released under the MIT License. There are 1 other projects in the npm registry using svelte-awesome-icons. io - I never did the Svelte version because Svelte handles the <svg-icon> native element just fine. for svelte. CSS vs Iconify transformations These are not CSS transformations, transformations are Easily Find & Copy SVG Icon name for Your Project Flowbite icon components for Svelte. They are lightweight, making them ideal for enhancing the visual appeal of modern web applications. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Cssgg icon set for Svelte ⚡ A curated list of awesome Svelte resources Svelte is a new way to build web applications. This zero dependency icon library builds Carbon Design System icons as Svelte components. This library adapts the following repositories for use in Svelte: Heroicons: tailwindlabs/heroicons - All the icons are available in the outline and solid variants. Follow our step-by-step guide to integrate, use, and customize icons seamlessly. design Get started with a collection of open-source Flowbite Svelte Icons built by the Flowbite community and based on the official design system Aug 7, 2025 · Find out the best Svelte icon libraries for your UI projects in 2025. Original source tabler/tabler-icons License Released under the MIT License. Contribute to DesignThen/svelte-icons development by creating an account on GitHub. svelte: Svelte 4 Flowbite Svelte is an open-source UI component library built with Svelte components, Tailwind CSS utility classes and based on the Flowbite design system and components. 35 36 <svelte: head> <link rel="stylesheet" href="https://unpkg. 1, last published: 8 months ago. Currently there are 460 icons, 230 outline and 230 solid. A set of open source icons for you next Svelte project. Easy to use with various front-end frameworks and libraries. Your support helps me maintain and improve this package for the benefit of the community Interactive Svelte playgroundimport * as Icon from 'flowbite-svelte-icons'; Official library for the free and open-source collection of over 430+ SVG icons for Flowbite and Svelte The Svelte implementation of the Carbon Design System featuring UI components, icons, pictograms, and charts. from_html (`<link rel="stylesheet" href="https://unpkg. Configuration You can configure icons props using <script> import { Icon } from 'svelte-icons-pack'; Use this page to easily search and configure a collection of up to 500 SVG open-source outline styled icons from the Flowbite library optimized for Svelte. Svelte Icons Pack is a collection of SVG icons as Svelte components with props. Try it in the Svelte REPL. <label><input type="checkbox" bind: checked= {lightMode}> Light mode</ label> Pros Comprehensive icon library with a wide range of categories and styles. /Icon. Download Static and animated Svelte vector icons and logos for free in PNG, SVG, GIF Apr 4, 2022 · SvelteKit SVG icons: how you can easily get SVG icons in your ️ Svelte app from just about any library by adding just one single dependency. Add links through pull requests or create an issue to start a discussion. Effortless Icon Packs & Components for Svelte, React, Vue and more. Start using svelte-radix in your project by running `npm i svelte-radix`. Contribute. Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. Lucide-icons for Svelte/SvelteKit. Original source ant-design/ant-design-icons License Released under the MIT License. Powered by Iconify. 310+ SVG Radix icons components for Svelte. svelte <script> import Icon from '. Material UI Components for Svelte, ready to use in your app. Consists of more than 3000 icons. json includes the necessary type definitions Check that you're using the latest version of the package Bundle size concerns? Use named imports instead of importing the entire icon set Implement code Skeleton is an adaptive design system powered by Tailwind CSS. Faster compiling If you need only a few icons from this library in your Svelte app, import them directly. 0, last published: 6 years ago. You can only change color of monotone icons. feel free to use them, share your feedback, and let's make this library awesome together! Beautiful & consistent icon toolkit made by the community. Each icon can be imported as a Svelte component, which renders an inline SVG element. johe nmcabrck revt nxrql kkv edzi jke tpl eee oeddf