phosphor-icons / Phosphor Home
Licence: mit
The homepage of Phosphor Icons, a flexible icon family for everyone
Stars: ✭ 704
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Phosphor Home
Boxicons
High Quality web friendly icons
Stars: ✭ 1,104 (+56.82%)
Mutual labels: icons, icon-font, icon-pack
icons
Simple, minimal line, and clean icon pack in vector formats — free for public use.
Stars: ✭ 24 (-96.59%)
Mutual labels: icons, icon-pack, icon-font
Eva Icons
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.
Stars: ✭ 8,114 (+1052.56%)
Mutual labels: icons, icon-font, icon-pack
Iconhandler
Tint you Icons, change the size, apply alpha color and set a position easily. 👓
Stars: ✭ 59 (-91.62%)
Mutual labels: icons, icon-font, icon-pack
Phosphor Icons
A flexible icon family for the web
Stars: ✭ 56 (-92.05%)
Mutual labels: icons, icon-font, icon-pack
Coreui Icons
CoreUI Free Icons - Premium designed free icon set with marks in SVG, Webfont and raster formats
Stars: ✭ 1,813 (+157.53%)
Mutual labels: icons, icon-font, icon-pack
Phosphor React
A flexible icon family for React
Stars: ✭ 97 (-86.22%)
Mutual labels: icons, icon-font, icon-pack
Awesome Iconjar
44 Collect free icon sets for iconjar. 收集免费的图标包，iconjar 格式（44套）。
Stars: ✭ 188 (-73.3%)
Mutual labels: icons, icon-font, icon-pack
Iconfontcppheaders
C, C++ headers and C# classes for icon fonts: Font Awesome, Fork Awesome, Material Design, Kenney game icons and Fontaudio
Stars: ✭ 509 (-27.7%)
Mutual labels: icons, icon-font
icons
A world of famous icon packs with easy to use interface
Stars: ✭ 21 (-97.02%)
Mutual labels: icons, icon-pack
vector-icons
Free Vector icons for Website and Mobile App
Stars: ✭ 28 (-96.02%)
Mutual labels: icons, icon-pack
dicefont
Scalable vector graphics for dice in icon font format
Stars: ✭ 20 (-97.16%)
Mutual labels: icons, icon-pack
la-capitaine-android
📱 La Capitaine icons on Android!
Stars: ✭ 17 (-97.59%)
Mutual labels: icons, icon-pack
chart-type-icon
An icon library that covers the vast majority of chart types
Stars: ✭ 33 (-95.31%)
Mutual labels: icons, icon-font
Keyrune
Magic: the Gathering set symbol pictographic font
Stars: ✭ 272 (-61.36%)
Mutual labels: icons, icon-font
Phosphor Icons
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.
- 772 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
More ways to use at phosphoricons.com.
For developers
Phosphor is available as a one-liner script, React package, and Vue package, all of which can be sourced from NPM or from a CDN.
HTML/CSS
-
Simple to use – 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. All you need to do is add the script to the document
<head>, and drop in icons with an<i/>tag and the appropriate class:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/phosphor-icons"></script>
</head>
<body>
<i class="ph-smiley"></i>
<i class="ph-heart-fill" style="color: hotpink"></i>
<i class="ph-cube-thin"></i>
</body>
</html>
Check out the full documentation on the phosphor-icons repo page.
React
-
Powerful – Phosphor's intuitive but powerful API can style the
color,size, andweightof 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! Check out the full documentation on the phosphor-react repo page.
import React from "react";
import ReactDOM from "react-dom";
import { Smiley, Heart, Horse } from "phosphor-react";
const App = () => {
return (
<div>
<Smiley />
<Heart size={32} color="hotpink" weight="fill" />
<Horse weight="duotone" />
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
- Lightweight – Supports tree-shaking, so your bundle only includes code for the icons you use.
-
Flexible – Icon Components are a transparent wrapper around SVG elements, so feel free to add your own inline
styleobjects,onClickhandler functions, and a multitude of other props you're used to using on SVGs.
Vue
-
Parity – As with React, you can manipulate the
color,size, andweightof an icon with a few keystrokes, or provide default styles to all icons via theprovide/injectAPI. It is fully tree-shakable and ready to use right away. Check out the full documentation on the phosphor-vue repo page.
<template>
<div>
<ph-horse />
<ph-heart :size="32" color="hotpink" weight="fill" />
<ph-cube />
</div>
</template>
<script>
import { PhHorse, PhHeart, PhCube } from "phosphor-vue";
export default {
name: "App",
components: {
PhHorse,
PhHeart,
PhCube,
},
};
</script>
Note: Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with
Ph, but otherwise follow the same naming conventions. Both Pascal and kebab-case conventions can be used in templates.
Related Projects
- phosphor-react ▲ Phosphor icon component library for React
- phosphor-vue ▲ Phosphor icon component library for Vue
- phosphor-icons ▲ Phosphor icons for Vanilla JS
- phosphor-flutter ▲ Phosphor IconData library for Flutter
- phosphor-webcomponents ▲ Phosphor icons as Web Components
- phosphor-figma ▲ Phosphor icons Figma plugin
License
MIT © Phosphor Icons
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].