Plus UI Design · Practical guides

Fix icon sizing and theme contrast

Use the wrapper size and the actual background to diagnose icons that appear too small, clipped or hard to see.

Control the component wrapper

The React component supports className and style on its wrapper. Use an explicit size, such as h-8 w-8 in a Tailwind project. If those classes have no effect, confirm Tailwind is configured and that the wrapper is not being constrained by a parent layout.

Compare variants on the destination

Preview light, dark and grayscale against your actual background rather than assuming a variant name guarantees contrast. Technology logos differ in their original shapes and colors. A visible label makes the meaning clearer when a monochrome logo is unfamiliar.

Distinguish React from Markdown

GitHub README files cannot run a React component. Save the SVG and reference it with an image tag instead. See the existing README guide for that workflow and the NPM guide for component props.