phosphor-icons / homepage Goto Github PK

View Code? Open in Web Editor NEW

4.3K 21.0 101.0 56.19 MB

The homepage of Phosphor Icons, a flexible icon family for everyone

Home Page: https://phosphoricons.com

License: MIT License

HTML 2.78% CSS 17.25% TypeScript 79.97%

phosphor icons icon-pack icon-font svgs

homepage's Introduction

Phosphor Icons

Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.

1,248 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 for web, React, Vue, Flutter, Elm, and other frameworks and platforms.

Vanilla Web

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/web"></script>
  </head>
  <body>
    <i class="ph ph-smiley"></i>
    <i class="ph-fill ph-heart" style="color: hotpink"></i>
    <i class="ph-thin ph-cube"></i>
  </body>
</html>

Check out the full documentation on the @phosphor-icons/web repo page.

React

Powerful – 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! Check out the full documentation on the @phosphor-icons/react repo page.

import React from "react";
import ReactDOM from "react-dom";
import { Smiley, Heart, Horse } from "@phosphor-icons/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 style objects, onClick handler 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, and weight of an icon with a few keystrokes, or provide default styles to all icons via the provide/inject API. It is fully tree-shakable and ready to use right away. Check out the full documentation on the @phosphor-icons/vue repo page.

<template>
  <div>
    <PhHorse />
    <PhHeart :size="32" color="hotpink" weight="fill" />
    <PhCube />
  </div>
</template>

<script>
  import { PhHorse, PhHeart, PhCube } from "@phosphor-icons/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.

Our Related Projects

@phosphor-icons/homepage ▲ Phosphor homepage and general info
@phosphor-icons/core ▲ Phosphor icon assets and catalog
@phosphor-icons/react ▲ Phosphor icon component library for React
@phosphor-icons/web ▲ Phosphor icons for Vanilla JS
@phosphor-icons/vue ▲ Phosphor icon component library for Vue
@phosphor-icons/swift ▲ Phosphor icon component library for SwiftUI
@phosphor-icons/elm ▲ Phosphor icons for Elm
@phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
@phosphor-icons/webcomponents ▲ Phosphor icons as Web Components
@phosphor-icons/figma ▲ Phosphor icons Figma plugin
@phosphor-icons/sketch ▲ Phosphor icons Sketch plugin
@phosphor-icons/pack ▲ Phosphor web font stripper to generate minimal icon bundles
@phosphor-icons/theme ▲ A VS Code (and other IDE) theme with the Phosphor color palette

Community Projects

phosphor-react-native ▲ Phosphor icon component library for React Native
phosphor-svelte ▲ Phosphor icons for Svelte apps
phosphor-r ▲ Phosphor icon wrapper for R documents and applications
blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
wireui/phosphoricons ▲ Phosphor icons for Laravel
phosphor-css ▲ CSS wrapper for Phosphor SVG icons
ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
eleventy-plugin-phosphoricons ▲ An Eleventy plugin for add shortcode, allows Phosphor icons to be embedded as inline svg into templates
phosphor-leptos ▲ Phosphor icon component library for Leptos apps (rust)
wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+
ember-phosphor-icons ▲ Phosphor icons for Ember apps
compose-phosphor-icons ▲ Phosphor icons for Compose Multiplatform

If you've made a port of Phosphor and you want to see it here, just open a PR here!

License

MIT © Phosphor Icons

homepage's People

Contributors

Stargazers

Watchers

Forkers

yibit nogas flaviovivorio mjunaidi designtips zwierzyniec resicon eugenewere arielsnunes erickwang jieyimao deltaniu teamepyc arsipedia ryanjweber kenman79 dahawong uygunovna highestage iamrishishah ranjeetkumar12 yeosangs livecycle-examples dpschen caio18-cosenza viniciusgabriels filipe23daniel yshayy yangshangbo fegastal ph7-jack mumairr wilbernight alexhcc gleicebsouza nix6839 codesteroids wicarpessoa code-br3aker iconifyit mosamy19 gg-big-org abhijit47 pablogeokar lucagoslar noozo carlosrobertodevops joaohgs78 thor10 maria-98-ui vicentecarvalho-3600 richburdon edbond88 captainkd baymax44 allen-1998 haithan58 wantingnbi wttaixyy wpengpeng168 wangzhe19991 haidao1919 charset404 daniel-bergmann zuriknet simenandre honsa bitfactory-oussama-fadlaoui ranapnea disk000 sorenholsthansen henrymelia subhanbakh vaimalaviya1233 nemraka tkzdev vladislavkovaliov appdirectory dudubass15 0xguccifer kingler lizixiu123 codedoctorde calico32 mdiqbalahmad dearphilippe psyche3 mah-shamim ignacemaes tactivstudios shahin-hawladar rizitis sakib923 onlyone0001 hachesilva-forks adamglin0 jimtyrro appcrafts oytla

homepage's Issues

GitLab Icon

Describe the requested icon

An icon for the GitLab Logo.

Screenshots

Additional context

Given the different line weights that could be applied, my design above uses a minimal version of the logo, without joining lines.

Cookie (Privacy) Icon

Needed an icon of a Cookie for our GRPC notice and was surprised to find Phosphor doesn't have one yet. Think there might be other icons related to privacy that could be cool to ad as well.

Icon request: teacher/chalkboard/seminar

I'm trying to pick an icon to represent my community's seminars. I've grown really quite attached to the duotone Phosphoricons, so it's a shame that there's nothing education-based in there, not even a graduation cap. In the meantime I'm using puzzle-piece.

FontAwesome has both a chalkboard and a chalkboard+teacher:

Many thanks, and thanks to the both of you for this very useful project.

enable/disable `stroke-linecap` and `stroke-linejoin`

Hey, fantastic job on the icons and website. I have one idea for an enhacement. It would be really cool if you could provide checkboxes to enable/disable stroke-linecap and stroke-linejoin

Browser icons & more

Again, thank you so much for such an awesome icon set!

A few suggestions for the next release:

Browser icons: Firefox, IE, Edge, Opera, Chrome and Safari
Square half - the same, but in horizontal direction. Something like .ph-square-half-horizontal
More file types - currently you have added only PDF, but would be extremely useful to have more file types: ZIP, PNG, JPG, XLS, CSV, DOC, PPT.
ZIP icon - apart from file type, which says "ZIP", having a separate icon for zip archive would be super handy
Some other logos related to development - SASS, CSS, HTML, JS, Angular, React, Vue, Tailwind

Cheers!

request new icon

Hi teams,
Thanks for your amazing icons.
But I hope you can add more icon such as handshake or something similar with the deal meaning.

Singular and new icons

Describe the requested icon
A collection of icons to extend what is already there plus a few new ones. I've put together the SVGs, they're contained in the attached ZIP file.

Screenshots

icons.zip

More Hamburger Icons

Describe the requested icon
Variants of the hamburger icon would be great addition I think.
Some good use cases described here.

Screenshots
Here are some of my ideas:

Additional context
I think providing some alternatives would be good for hamburger menu as it's one of the commonly used UI pattern in landing pages.
Absolutely love phosphor icons by the way. We are using it in our production app. Thanks.

Star Half

Describe the requested icon
Hello @author,

Could you please add Icon "star half" to library.

Thanks in advance!

Screenshots
If applicable, add screenshots to help illustrate the icon appearance.

https://fontawesome.com/v5.15/icons/star-half-alt?style=solid
https://fontawesome.com/v5.15/icons/star-half?style=solid

Additional context
Add any other context here.

Import / Export

Describe the requested icon
Import export icons. For when you can import a file, edit it, then export it.

Icon Request: star solid icon

I wish there was a star-shaped icon that was full.

Microsoft brand icon

For the authentication form, I need some brands. the brands "Google" and "Apple" already exist, but "Microsoft" doesn't

Icon Request: verified + unverified

Describe the requested icon

Similar to check-circle and question but with wavy circle

Screenshots

Existing implementations

Select icons

Describe the requested icon
It would be cool if there are some select icons in this library.

Screenshots
https://materialdesignicons.com/icon/select-off
https://materialdesignicons.com/icon/select
https://materialdesignicons.com/icon/select-inverse
https://materialdesignicons.com/icon/select-all

Additional context
I'm switching from materialdesignicons to phosphor because I like the light icons :)

Icon Request: Pinterest Logo

Describe the requested icon
https://pinterest.com

Icon Request: Picture-in-picture (PiP)

Describe the requested icon
A picture-in-picture icon (as the one seen for example when you play videos with Firefox or Opera) to change a video into a smaller format version that is usually displayed in a corner of the screen to allow for browsing content while simultaneously watching a video.
It could for example be used in a video chat app or on any website that offers video playback.

Screenshots

Picture-in-picture button in Firefox (also note the PiP icon in the YouTube player controls):

Existing implementations

The icon used in firefox:

Material icons for picture-in-picture mode:

Gradient Icon

Describe the requested icon
There is no icon for gradient in the current set.

Screenshots

Icon Request: GitHub

Hi, I love your icons and really enjoy using them!
I'm building a simple open-source website and would like to add a link to its GitHub.

Describe the requested icon
A GitHub icon.

Screenshots

Additional context
I wasn't sure if this is allowed in terms of IP, but I've found a lot of free icons reinterpreting GitHub, so I assume it is legal.

Icon for opacity

Describe the requested icon
Please add an icon for opacity.

Screenshots

Additional context
It would be great if you could add an icon for opacity.

Microsoft Teams

Hey! Is it possible to have icons for Microsoft Teams?
Oh and by the way, this library is awesome!!

Suggestion: Trophy/Challenge Cup/Leaderboard/Tournament Icons

Describe the requested icon
I think these icons would be extremely useful especially for tournaments, competitions, or any form of leaderboard. These are good for virtual "awards" as well (crowns, medals, etc).

Screenshots

Additional context
Thank you, this is a fantastic icon library. :-)

Request: text editing icons

I have a few icons to request, some of which I think are mandatory for icons libraries.

Bold
Italic
Underline
Strikethrough/Line through
arrow-line-middle-vertical
arrow-line-middle-horizontal

Originally posted by @RichardBarrett in #7 (comment)

Suggestions for icon Unicode.

Hopefully Unicode has been added to the preview.

.ph-pencil-line:before {
    content: "\f130";
}

Feature Request: Variable stroke width

Thanks for making Phosphor icons open source, we love them. We really appreciate the attention to detail in retaining a clear consistency of style throughout the set as well as all the thoughtfulness put into their documentation and distribution.

We are currently using Phosphor in our web app at 16px and 20px for most icons, with some 24px and 32px icons for limited cases. We are having a little trouble getting the icon stroke width to look consistent across each size. Even experimenting with the various options (thin, light, regular etc.) we find that the bold 16px icons render a bit thin compared to larger icons of the same style. Additionally, we love the duotone set, but can't use this flexibly as the stroke weight is currently fixed.

We'd like to propose the idea of granular control of stroke width. Of course we recognise it may not be possible to render the icons properly and legibly at all stroke widths, but having some finer control might allow us to get consistency across icon sizes.

Another simpler idea may be to introduce a 'black' weight that helps us beef up icons at smaller sizes.

Would love to know what you think. If you're on board with this change we're more than happy to submit a pull request.

Thanks again for all your work on this!

Mike and @callum

eSIM icon

Built-in SIM for mobile phones

Cats and cat poses

Describe the requested icon
Can you make cat faces and poses? Like smiling, frowning, cleaning itself?

Screenshots

Additional context
Some of these could belong with the Smileys, maybe?

Update Medium Icon

Describe the requested icon
The Medium brand icon is outdated. I would really appreciate it if you could update it.

Thank you for building Phosphor Icons ✨

Read about the new Medium brand and logo guidelines here.

Screenshots

Medium Icon on Phosphor Icons

New Medium Icon

Additional context
An introduction to Medium's evolved brand identity

Nice spinner/loading indicator

Describe the requested icon
First of all want to say a huge THANK YOU for releasing this library, this is by far the most nice looking and perfectly designed icon set. Please keep maintaining it, it will for sure become more and more popular!

As per icon request, would be nice to have some nice loading indicator that can be animated with infinite rotation in CSS.

Screenshots
Something like this:

Keyboard modifier key icons

Describe the requested icon
I'll start with the use case, since it makes it clear why I would like these icons to be added. On macOS (mainly), modifier keys are represented by symbols, when the shortcut is shown, like: ⌘+C, ⌥+⇧+X. command, backspace, windows-logo, arrow-fat-up, arrow-fat-line-up, arrow-line-right and key-return are already a part of the collection, and since the unicode characters are inconsistent, I prefer to use the icons when displaying shortcuts.

The missing icons are:

^-like for control
⌥-like for option
something like the backspace icon in reverse for delete

Screenshots
This is from the shortcuts tab of Google Docs, I find it inconsistent:

As for the icons to be added, something similar to the character would be the best option in my opinion.

Additional context
Add any other context here.

Movie icons (Genres and others)

Movie related icons

Movie genres

Action
Animation
Biopic
Comedy
Crime
Dance
Disaster
Drama
Fantasy
Film Noir
Found Footage
Historical
Horror
Musical
Mystery
Puzzle
Romance
Sci-Fi
Sport
Superhero
Thriller
War
Western

Misc

Pop-Corn
Retro TV
Script
Clapper

I know some of them (like the Heart for Romance, the Knife for Thriller,...) already exists, but I just put them in the list just in case you guys had a better idea for those.

Of course, the icons don't have to be named like the genre for example the Western icon should probably be named Cactus but it would be cool to create a collection of these. For a movie theater website, a screenwriting app, or whatever related to movies.

Screenshots to illustrate both how the icons could look like and their usage

Can we have a map of all icons code? So we can map them into a database?

I'm building a Flutter app and using this awesome icons package!

What I need is to set icons dynamic via database, but right now this isn't possible because we don't have each icon code mapped, thus, I can't make an API that provides the list of icons.

Could we have something like a json that we can use to map all icons into our apps? Thanks!

性别图标

您好，我在使用的过程中经常会用到“男女性别”的图标，或者说male、female，使用次数比较频繁，希望能尽快添加到图标库，感谢！

Palette Icon

Describe the requested icon
I need an icon to select a color.

Screenshots
https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Apalette
Something like that :)

Additional context
-

Header Icon(s)

Describe the requested icon
Header icon(s). Useful in editors when you want to insert a header.

Screenshots

From the Bear notes app on Mac
From the Github editor

Additional context
An H in the style of the other edit icons would do the job. H1-H6 would be a plus.

Magic wand icon

Describe the requested icon
I think a magic wand icon would be really useful. For places like adding filters in photos or transforming something magical.

Screenshots
If applicable, add screenshots to help illustrate the icon appearance.

Additional context
Add any other context here.

Spotify Icon

Describe the requested icon
The icon could be used to show links to a playlist, album or song, on Spotify.

Drawing icons

Describe the requested icon
It would be nice to have drawing-related icons : I'm building an app where people can trace shapes on a map and I came with these manually drawn icons (screenshot):
The downside of these is:

They don't really fit with other phosphor icons
They are SVGs, inlined in an img tag thus don't support color variations

Basically, I'd like the following icons:

polygon shape
multi-line shape

I haven't seen a way to combine icons (e.g.: a ph-map-pin with an upper ph-plus), these variants are welcome:

ph-map-pin +
ph-circle +
polygon +
multi-line +

Screenshots

Additional context
If you're interested to add these and want a base, the sources are available. (I see there are some more outdated ones from when I wasn't yet using Phosphor :) )

I can also make a PR with an attempt to match your design.

Thanks for the good work, your set is refreshing :)

Icon Request: Snapchat

Describe the requested icon
Please a request for Snapchat logo icon, my client uses Snapchat for marketing. I develop their website, so I want to add a Snapchat link.

Screenshots

Additional context
This library is a blessing, thank you for the hard work. Donating soon!

Furniture

Requesting more furniture icons

Things like a bath tub, shower, chair, sofa, door, lamp etc

fast forward & rewind

Could you please add "Fast forward" and "Rewind" similar to "fast-forward-circle" and "rewind-circle" without the circle to complete the set of play / pause / stop / skip-forward / skip-back.
Thank you.

Icons for Different Events

Icons for Different Events i.e. Cake for Birthdays & Today Date Icon for Wedding Anniversaries

Icon Request [Screen Share]

Screen share icon please, love your work so much!

Chevron Icons

Describe the requested icon

You'll often see chevron's used for dropdown menu's, or buttons that go back and forward.
I tried to use the Phosphor arrow's, arrow-circle's and caret but these look a bit weird to me for these controls.

Screenshots

This is what we're currently using for a dropdown menu:

And here we are using the Phosphor caret. It looks okay but I suspect chevrons would display nicer:

Icon request: thermometer and humidity

The available icon set is amazing, but there's one icon missing from building great looking home weather station UI and it's thermometer icon. Would be great addition, since e.g. weather related icons already exist.

Existing drop icon would work for humidity usage, but slight modification with %-sign would make it even more ideal fit for humidity data.

tiktok

Hi guys,
Firs of all what a great library. We are dropping everything else and only using this from no on.
Thank you for making available to the public!
Any chance to create a TikTok icon to go along the other social media icons? It's the only icon we are missing right now.
Best regards,
Pablo

Tree

Describe the requested icon
A tree. For depicting nature.

Screenshots

Thanks!

Loading State

Describe the requested icon
An icon that represents a loading state. Like a circle of dots or a circle with a notch so you can animate it to show loading. (I couldn't find anything that resembled this, correct me if I'm wrong.)

Screenshots

Additional context
Love the library. Thanks for your hard work!

Blank/Empty/Null Icon

Describe the requested icon

Sometimes, when some items in a complex template have or don't have an icon, it may be beneficial to load them with a 'blank' icon to keep code simple instead adjusting visibility or opacity.

Screenshots

Super simple: just a empty icon that could support the same attributes (mainly size) that normal icons could support.

Stripe Icon

Describe the requested icon
We integrate with Stripe and have a section for users to configure their stripe settings etc.

Screenshots
We were using MaterialDesignIcons.com, here's our settings screen before I started switching the icons over to Phosphor:

And here it is with Phosphor:

phosphor-icons / homepage Goto Github PK

homepage's Introduction

Phosphor Icons

For developers

Vanilla Web

React

Vue

Our Related Projects

Community Projects

License

homepage's People

Contributors

Stargazers

Watchers

Forkers

homepage's Issues

Describe the requested icon

Screenshots

Existing implementations

Movie related icons

Recommend Projects

Recommend Topics

Recommend Org