{"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,"search_vec":"'9.3.0':45 'access':116,138 'activ':148 'ad':58 'address':159 'also':100 'array':113 'badg':98 'behind':19 'border':93 'bug':63 'cadenc':49 'cater':35 'commonj':75 'compact':89 'compon':29,81 'comprehens':5 'consist':123 'convent':128 'current':41 'design':13 'detail':92 'differenti':66 'direct':137 'dual':69 'esm':73 'expand':154 'expos':110 'fallback':131 'featur':56 'file':34,142 'fix':64 'flexibl':79 'follow':121 'format':86 'framework':11,60,126,163 'frequent':151 'icon':24,61,120,156,164 'includ':51,67,101 'intellig':130 'issu':160 'jank':108 'javascript':161 'key':65,119 'languag':97,125 'language-framework':124 'lg':90 'librari':22 'like':57 'logo':12 'maintain':15,149 'modern':72 'modul':76 'name':127 'new':55,59 'non':134 'non-react':133 'offer':23 'option':96 'organ':140 'packag':146 'platform':9,112 'platformicon':1,2,30 'preloadicon':103 'prevent':106 'project':38 'prop':83 'provid':3,144 'radius':94 'raw':32 'react':28,80,135 'receiv':150 'regular':52 'releas':48 'render':107 'runtim':115 'sentry.io':20 'set':6,157 'setup':39 'size':85 'sm':87 'stabl':42 'support':70,118 'svg':33,141 'system':77 'team':18 'typescript':165 'updat':53,152 'user':136 'util':104 'various':37 'version':43 'web':8,162","created_at":"2026-04-19T13:38:38.270045+00:00","updated_at":"2026-04-19T13:38:38.270045+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://sentry.io","github":"https://github.com/getsentry/platformicons","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/platformicons","openapi_spec":null,"status_page":null,"smithery":null,"categories":["crm-productivity"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}