Open Source TypeScript Icon Sets

Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by Ionic. Ionicons is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps. Ionicons was made for Ionic Framework, a cross-platform hybrid and Progressive Web App framework. The Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need. Also note that only visible icons are loaded, and icons which are "below the fold" and hidden from the user's view do not make fetch requests for the svg resource. If you're using Ionic Framework, Ionicons is packaged by default, so no installation is necessary.

Iconoir is an open-source library with 1000+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters. A React library is available to install under the name iconoir-react. A Flutter library is available to install under the name iconoir_flutter. Iconoir is happily part of Framer now. To start using the icons, on the top menu, Insert > Graphics > Iconoir. You can switch between icons from the right sidebar in the editor. The class must always be "iconoir-" and then the name of the icon. The icons are display: inline-block and default to the current font size. You can control this by adjusting the ::before styles of the element.

Community-run fork of Feather Icons, open for anyone to contribute icons. It began after growing disaffection with the Feather Icons project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted. Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us. At its core, Lucide is a collection of SVG files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe).

Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package. Suitable for MeteorJS, Gatsbyjs etc. SVG is supported by all major browsers. With react-icons, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project. From version 3, vertical-align: middle is not automatically given. Import path has changed. You need to rewrite from the old style. You can add more icons by submitting pull requests or creating issues.

Custom election title bar inspires on VS Code title bar. This project is a typescript library for the electron that allows you to configure a fully customizable title bar. To see the options you can include in the Title Bar constructor, such as color of elements, icons, menu position, and much more, and the methods you can use, go to the wiki

The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics. It distributes UI React components and static assets for use in building web layouts. Uses high contrast, color-blind safe palettes and is tested with most assistive technology. Configurable enough to meet the needs of a wide array of contexts while maintaining brand and low-level consistency. Code is friendly to the novice and expert alike. The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. The primary goal of this library is to provide reusable UI components that can be used throughout Elastic's web products. As React components, they remove CSS from the process of building UIs. As a single source of truth, the framework allows our designers to make changes to our aesthetic directly in the code.

Jenga Icons is a collection of adaptable icons designed for use in interfaces, diagrams, and other applications. The icon components can receive all the props that a standard SVG element can, which includes inline style objects, onClick handlers, and other properties. The Jenga icon family is easy to customize and truly conistent in scale and style.

Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. With our new Icon Wizard, you can magically add a modifier – like circle-plus, slash, or even poop – to almost any Font Awesome icon. Available now to Font Awesome Pro subscribers. Font Awesome Sharp Solid and Regular, the first styles in our new Sharp family, are ready to use when you need a special touch of class for your project! Read the announcement and see what's new in the 6.3.0 release. Font Awesome 6 makes it even easier to use icons where you want to. More plugins and packages to match your stack. Less time wrestling browser rendering. We know the pain of wrangling icons on the internet. That's why in 2012, we created the first version of our open-source icons and toolkit. And with the help of our subscription plan Font Awesome Pro, we've built a lean icon-obsessed team who keep cranking out more icons, more styles, and more services for everyone.

Icon web font library for @siemens/ix. Using icons within your project. You need to install and load styling.

Open-source neutral-style system symbols elaborately crafted for designers and developers. All of the icons are free for both personal and commercial use.

Access thousands of icons as components on-demand universally. Any icon sets - 100+ popular sets with over 10,000 icons, logos, emojis, etc. Powered by Iconify. Major build tools - Vite, Webpack, Rollup, Nuxt, etc. Powered by unplugin. Major frameworks - Vanilla, Web Components, React, Vue 3, Vue 2, Solid, Svelte, and more. On-demand - Only bundle the icons you really use, while having all the options. SSR / SSG friendly - Ship the icons with your page, no more FOUC. Stylable - Change size, color, or even add animations as you would with styles and classes. Load your custom icons to get universal integrations at ease. Use icons as components directly in your template. TypeScript support. From v0.13.2 you can also use raw compiler to access the svg icon and use it on your html templates, just add raw to the icon query param.

Hamburger menu icons for React, with CSS-driven transitions. Created to be as elegant and performant as possible. This means no JavaScript animations, no transitions on non-cheap properties and a small size. It is recommended to have a tap/click area of at least 48x48 pixels. Therefore, padding will be added around the icon to create a surface of exactly this size. Keyboard interaction is provided with the enter key, and the icon element has the recommended accessibility attributes (such as role). You can use the label property to supply an ARIA label for the icon.

The DevUI Design Design system contains a combination of DevUI rules, Design languages, and best practices. DevUI Design allows developers to focus more on application logic, while designers focus on user experience, interactions, and processes. Open source front-end solutions for enterprise mid- and back-office products. DevUI is an open-source front-end solution for middle and back-end products of enterprises. Its design values ​​are based on the three concepts of "simplicity", "immersion" and "flexibility" combining nature and humanity, aiming to provide a standard for designers and front-end developers It is an enterprise-level out-of-the-box product that meets various landing scenarios. Based on the Angular framework, DevUI provides a variety of components with powerful functions and rich scenarios, such as Tree, Table, etc.

IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icons. Instead of using various SVG source files to achieve different themes, We implement a technology that transforms the attributes of a single SVG source file into multiple themes. Besides, we provide cross-platform components, including react-icons, vue-icons and svg-icons. So whether you are a designer or a developer, you can use them in your designs or your projects for free. Basic coloring can be done by setting two attributes on the node: fill and stroke. Fill sets the color inside the object while stroke sets the color of the line drawn around the object. By changing these two attributes, you can transform a single SVG icon into different themes, including outline, filled, two-tone, and multi-color.

Phosphor is a flexible icon family for interfaces, diagrams, presentations, whatever, really. 1047 icons and counting. 6 weights: Thin, Light, Regular, Bold, Fill, and Duotone. Designed at 16 x 16px to read well small and scale up big. Raw stroke information retained to fine-tune the style. We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. Phosphor's intuitive but powerful API can style the color, size, and weight of an icon with a few keystrokes, provide default styles to all icons via the Context API, or directly manipulate the SVG at runtime through render props to do some amazing things! Supports tree-shaking, so your bundle only includes code for the icons you use.

Shape the merchant experience for Shopify’s core product, the admin. Fundamental design guidance for creating quality admin experiences. Reusable elements and styles, packaged through code, for building admin interfaces. Coded names that represent design decisions for color, spacing, typography, and more. Over 400 carefully designed icons focused on commerce and entrepreneurship. The shopify/polaris repository is an intergalactic monorepo made up of NPM packages, VSCode extensions, and websites. Run commands across all workspaces.

A collection of everyday React Native CLI tools. Everyday tools for simpler React Native development. Once installed, plugins are available through the React Native CLI. You can get the list of available plugins by running react-native -h within your project's folder.

Read a set of SVG icons and output a TTF/EOT/WOFF/WOFF2/SVG font, a generator of fonts from SVG icons.

Phosphor is a flexible icon family for interfaces, diagrams, presentations, whatever, really. We designed the icon library we always wanted to use. Easy to pick up and plug in. Truly consistent in style and scale. Flexible to multiple sizes and weights. Reserved enough to be multi-purpose, but a little quirky, too. Simply import the icons you need, and add them anywhere in your render method. Phosphor supports tree-shaking, so your bundle only includes code for the icons you use. Icon components accept all props that you can pass to a normal SVG element, including inline style objects, onClick handlers, and more. Phosphor takes advantage of React Context to make applying a default style to all icons simple. Create an IconContext.Provider at the root of the app (or anywhere above the icons in the tree) and pass in a configuration object with props to be applied by default to all icons.