{"id":11562,"library":"platformicons","title":"Platformicons","description":"Platformicons provides a comprehensive set of web platform and framework logos, designed and maintained by the team behind Sentry.io. This library offers icons as both a React component (`PlatformIcon`) and raw SVG files, catering to various project setups. The current stable version is 9.3.0, with a release cadence that includes regular updates for new features (like adding new framework icons) and bug fixes. Key differentiators include its dual support for modern ESM and CommonJS module systems, a flexible React component with props for sizing, formatting ('sm' for compact, 'lg' for detailed), border radius, and optional language badges. It also includes a `preloadIcons` utility to prevent render jank and exposes a `platforms` array for runtime access to supported keys. Icons follow a consistent `language-framework` naming convention with intelligent fallbacks. For non-React users, direct access to organized SVG files is provided. The package is actively maintained, receiving frequent updates to expand its icon set and address issues.","status":"active","version":"9.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/getsentry/platformicons","tags":["javascript","web","framework","icons","typescript"],"install":[{"cmd":"npm install platformicons","lang":"bash","label":"npm"},{"cmd":"yarn add platformicons","lang":"bash","label":"yarn"},{"cmd":"pnpm add platformicons","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for using the PlatformIcon React component.","package":"react","optional":false}],"imports":[{"note":"PlatformIcon is a named export. Default imports or incorrect CommonJS require patterns will fail. The package ships both CJS and ESM, but ESM imports are recommended.","wrong":"import PlatformIcon from 'platformicons';\n// OR\nconst PlatformIcon = require('platformicons');","symbol":"PlatformIcon","correct":"import { PlatformIcon } from 'platformicons';"},{"note":"This named export provides a string array of all supported platform keys at runtime. Incorrectly accessing it via CommonJS can lead to undefined values.","wrong":"const platforms = require('platformicons').platforms;","symbol":"platforms","correct":"import { platforms } from 'platformicons';"},{"note":"A named export function used to dynamically insert <link rel=\"preload\"> tags for icons, improving perceived performance. Use direct named import for optimal tree-shaking.","wrong":"import * as PlatformIcons from 'platformicons'; PlatformIcons.preloadIcons();","symbol":"preloadIcons","correct":"import { preloadIcons } from 'platformicons';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { PlatformIcon, preloadIcons } from 'platformicons';\n\n// Preload all icons to avoid render jank on initial load\npreloadIcons('sm');\n\nfunction App() {\n  return (\n    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>\n      <h1>Platform Icons Demo</h1>\n      <p>Render a React icon with custom size and radius:</p>\n      <PlatformIcon platform=\"javascript-react\" size={48} radius={8} />\n      <p>Render a Python Django icon with a language badge:</p>\n      <PlatformIcon platform=\"python-django\" size={40} withLanguageIcon={true} languageIconStyles={{ borderRadius: '2px' }} />\n      <p>Render a Go Echo icon in 'lg' format:</p>\n      <PlatformIcon platform=\"go-echo\" size={60} format=\"lg\" />\n    </div>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root') ?? document.createElement('div'));\nroot.render(<React.StrictMode><App /></React.StrictMode>);\n","lang":"typescript","description":"Demonstrates installation, preloading icons, and rendering multiple PlatformIcon components with various props for customization."},"warnings":[{"fix":"npm install react react-dom --save","message":"React is a mandatory peer dependency for using the PlatformIcon component. Ensure 'react' and 'react-dom' are installed in your project alongside 'platformicons' to avoid runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consult the `platforms` export for a complete list of valid keys: `import { platforms } from 'platformicons'; console.log(platforms);`","message":"Platform identifiers follow a 'language-framework' naming convention (e.g., 'javascript-react', 'python-django'). Supplying an incorrect or unsupported string for the `platform` prop will result in the library falling back to a generic language icon, then a default icon, which may not be what you expect.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"When referring to Node.js-based frameworks, use `javascript-framework` (e.g., `javascript-express`) instead of `node-express`.","message":"The `node-*` platform identifiers are treated as aliases for `javascript-*` for backwards compatibility. For new implementations, it is recommended to consistently use `javascript-*` for clarity and future-proofing.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Explicitly set `format` to `'sm'` or `'lg'` based on your design requirements. Be aware of the underlying SVG directories if accessing raw files directly.","message":"The `format` prop (`'sm'` or `'lg'`) determines the icon's visual style and resolution. `'sm'` uses compact icons optimized for small sizes from `/svg/`, while `'lg'` uses more detailed 80x80px icons from `/svg_80x80/`. Mixing these without understanding their distinctions can lead to visual inconsistencies or unexpected icon styles.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install platformicons` or `yarn add platformicons`. Double-check the import statement for typos: `import { PlatformIcon } from 'platformicons';`","cause":"The 'platformicons' package is not installed, or there's a typo in the import path, or your bundler's configuration is not correctly resolving modules from node_modules.","error":"Module not found: Can't resolve 'platformicons' in ..."},{"fix":"Ensure you are using a named import: `import { PlatformIcon } from 'platformicons';`. For CommonJS environments, use `const { PlatformIcon } = require('platformicons');`","cause":"This usually occurs when attempting to import `PlatformIcon` as a default export (e.g., `import PlatformIcon from 'platformicons'`) or using an incorrect CommonJS `require` pattern, while `PlatformIcon` is exclusively a named export.","error":"TypeError: (0 , platformicons__WEBPACK_IMPORTED_MODULE_0__.PlatformIcon) is not a function (or similar 'PlatformIcon is not defined' error)"},{"fix":"Install `react` and `react-dom` (`npm install react react-dom`) and ensure React is imported in your component files: `import React from 'react';`","cause":"The `PlatformIcon` component is a React component and requires React to be available in the scope. This error indicates that React is either not installed or not correctly imported/made available where PlatformIcon is being used.","error":"Uncaught ReferenceError: React is not defined (when using PlatformIcon component)"}],"ecosystem":"npm"}