js-pretty-icons

JS Pretty Icons is a component library with a lot of beautiful and customizable icons, all of them from SVGRepo website.

NPM Package: js-pretty-icons - npm

Installation

npm install js-pretty-icons

Usage

Recommended Usage

You can import a PrettyIcon Component from "js-pretty-icons" library as a default import.

import PrettyIcons from "js-pretty-icons";

// Without custom width, height, color and className
return <PrettyIcons icon="chevron-down" />;

// With custom width, height, color and className
return (
  <PrettyIcons
    icon="chevron-up"
    width={32}
    height={32}
    color="#FF0000"
    className="custom-class-chevron-down"
  />
);

Other Usage

You can import the specific Icon Component from "js-pretty-icons" library as a non-default import.

import { ChevronDownIcon } from "js-pretty-icons";

// Without custom width, height, color and className
return <ChevronDownIcon />;

// With custom width, height, color and className
return (
  <ChevronDownIcon
    width={32}
    height={32}
    color="#FF0000"
    className="custom-class-chevron-down"
  />
);

Props

Prop	Type	Description	Required
icon	string	Icon to display (PrettyIcons only).	Yes
width	number	Icon width in pixels (default: 32px).	No
height	number	Icon height in pixels (default: 32px).	No
color	string	Icon color (default: "#000000").	No
className	string	Additional className (always includes {icon-name}-icon, e.g. chevron-down-icon).	No
ariaLabel	string	Accessible label for screen readers. When omitted, the icon is treated as decorative.	No
title	string	SVG title used as an accessible name. When omitted, the icon is treated as decorative.	No

Icons are decorative by default (aria-hidden="true"). Provide ariaLabel or title when the icon conveys meaning on its own.

Available Icons

Name Icon alarm alarm-variant-1 anchor-link apple arrow-down arrow-left arrow-right arrow-up bag bag-variant-1 bag-variant-2 bell bell-slash bell-slash-variant-1 bell-variant-1 bell-variant-2 bitbucket bitbucket-variant-1 bookmark brave bug bug-slash calendar calendar-variant-1 camera camera-slash camera-variant-1 camera-variant-2 camera-variant-3 camera-variant-4 cart cart-variant-1 cart-variant-2 chat chat-check chat-close chat-dots-horizontal chat-exclamation chat-info chat-question check check-circle chevron-down chevron-left chevron-right chevron-up chrome clock clock-variant-1 clock-variant-2 close cloud-download cloud-download-variant-1 code code-variant-1 copy copy-variant-1 discord discord-variant-1 docker document document-variant-1 document-variant-2 dots-horizontal dots-vertical double-chevron-down double-chevron-left double-chevron-right double-chevron-up download download-variant-1 download-variant-2 edit-image	Name Icon exclamation-mark external-link eye eye-closed eye-slash eye-slash-variant-1 eye-variant-1 facebook feed filter filter-variant-1 firefox folder folder-variant-1 folder-variant-2 git git-branch git-branch-variant-1 git-commit git-commit-variant-1 git-merge git-merge-variant-1 git-pull-request git-pull-request-variant-1 git-variant-1 github gitlab gitlab-variant-1 google google-drive google-meet google-variant-1 half-heart half-heart-filled half-star half-star-filled heart heart-filled home home-variant-1 image image-check image-close image-minus image-plus image-variant-1 info instagram instagram-old internet-explorer internet-globe internet-globe-variant-1 linkedin linkedin-variant-1 location location-variant-1 mail mail-open mail-variant-1 menu messenger meta microsoft microsoft-edge microsoft-teams minus minus-circle mobile-phone mobile-phone-variant-1 moon moon-in-the-sea moon-variant-1 npm	Name Icon npm-variant-1 opera pause pencil pencil-variant-1 pencil-variant-2 phone phone-variant-1 pinterest pinterest-variant-1 play play-pause plus plus-circle plus-minus profile profile-variant-1 question-mark reddit refresh refresh-variant-1 safari save save-variant-1 save-variant-2 search send send-variant-1 send-variant-2 send-variant-3 send-variant-4 settings settings-variant-1 signal skype slack snapchat snapchat-variant-1 stackoverflow star star-filled sun sun-in-the-sea sun-variant-1 telegram telegram-variant-1 terminal terminal-variant-1 terminal-variant-2 tiktok trash trash-variant-1 twitch twitter upload upload-variant-1 upload-variant-2 vercel vercel-variant-1 warning-circle warning-triangle whatsapp wifi wifi-exclamation wifi-low wifi-medium wifi-slash wifi-very-low windows youtube youtube-variant-1

All icons are sourced from SVG Repo and you can find the icon page on the icon file inside assets folder.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

MIT