https://github.com/triggerdotdev/companyicons
SVG React icon set for popular APIs, by the makers of Trigger.dev.
https://github.com/triggerdotdev/companyicons
Last synced: 14 days ago
JSON representation
SVG React icon set for popular APIs, by the makers of Trigger.dev.
- Host: GitHub
- URL: https://github.com/triggerdotdev/companyicons
- Owner: triggerdotdev
- License: mit
- Fork: true (Timonwa/demo-ui-library)
- Created: 2023-06-03T11:57:29.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-05T16:51:31.000Z (about 1 month ago)
- Last Synced: 2025-03-31T10:21:22.866Z (15 days ago)
- Language: TypeScript
- Homepage:
- Size: 1.73 MB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
- jimsghstars - triggerdotdev/companyicons - SVG React icon set for popular APIs, by the makers of Trigger.dev. (TypeScript)
README
# Company Icons
Easily render Company icons in your React app. Either directly use an icon by importing it from the `@trigger.dev/companyicons` package or use the `CompanyIcon` component to render any icon by name.
This library was created for use in [Trigger.dev](https://trigger.dev) to render Company icons.
Please note that the copyright and trademarks of all icons belong to their respective companies. Please use them responsibly and ensure you follow the terms of use of each company. We're not responsible for any misuse. You're on your own kids.
## Installation
Install using your favorite package manager, e.g. npm:
```
npm install @trigger.dev/companyicons
```
## Usage
Directly import a specific icon from the library and use them in your React components.
```tsx
import React from "react";
import {
AirtableIcon,
AsanaIcon,
GitHubLightIcon,
} from "@trigger.dev/companyicons";
function App() {
return (
{/* Style using classes, including Tailwind */}
{/* Or style */}
{/* Some icons have a "light" and "dark" variant, like GitHub */}
);
}
export default App;
```
Or use the `CompanyIcon` component to render any icon by name. This allows you to render Company icons at runtime based on the name.
```tsx
import React from "react";
import { CompanyIcon } from "@trigger.dev/companyicons";
function App() {
return (
{/* GitHub has a light and dark variant.
If unspecified you'll get the default (dark in this case) */}
{/* Or specify the variant */}
{/* Slack has no variants, so will ignore the variant you specify */}
);
}
```
## Contributing
We welcome new icon contributions and fixes. Please follow the steps below to contribute.
### Steps
- Clone the repository to your local machine.
- Install the dependencies using `npm install`.
- View the components in the browser using `npm run storybook`.
- Make your changes, and ensure that:
- icons are inline svgs
- icons have the width and height removed and have a valid viewBox
- icons have a title element with the name of the icon
- the icon fills the viewbox, but isn't stretched
- all svg properties are camel case (no dashes). It should be `fillRule` not `fill-rule`.
- there are no console errors in Storybook
- Check your changes look correct in Storybook in your browser.
- Create a pull request to the main repository with a good description.
### Publishing
The Trigger.dev team can publish new versions of the library. Please create a pull request with your changes and we'll publish a new version.
They will:
1. Check any changes look good in Storybook.
2. Bump the version number.
3. Run `npm i`.
4. Run `npm publish` to publish a new version.
5. Push the modified package.json to the repository.
## License
This library is licensed under the [MIT License](https://github.com/triggerdotdev/Company-icons/blob/main/license).
## Trigger.dev
[Trigger.dev](https://trigger.dev) is a background Jobs framework. It makes it easy to create long-running jobs directly in your codebase with features like Company integrations, webhooks, scheduling and delays.