[Home](/index.md) › [Icons](/icons.md) › styled-components

# styled-components

styled-components is a CSS-in-JS library for React that styles components with tagged template literals, scoped class names, theming and server-side rendering.

## At a glance

- **Page**: https://devicons.io/icons/styled-components/
- **Website**: https://styled-components.com/
- **Also known as**: Styled Components, styled, CSS-in-JS
- **Tags**: [CSS](/icons/tag/css/), [React](/icons/tag/react/), [CSS In Js](/icons/tag/css-in-js/), [Styling](/icons/tag/styling/), [JavaScript](/icons/tag/javascript/)
- **Version added**: 1.3.0
- **Contrast**: needs a light backdrop on dark backgrounds

## Files

Each file is one variant of this logo. The component name is derived from the file name.

| File | Component | Color SVG | Monochrome SVG | Font class |
| --- | --- | --- | --- | --- |
| `styled-components` | `StyledComponents` | https://devicons.io/devicons/icons/styled-components.svg | https://devicons.io/devicons/font/styled-components.svg | `devicons devicons-styled-components` |

## Install and use

```bash
npm install @dev.icons/react  # or @dev.icons/vue, @dev.icons/svelte
```

### React

```tsx
import { StyledComponents } from "@dev.icons/react";
// Monochrome (inherits currentColor):
// import { StyledComponents } from "@dev.icons/react/mono";

<StyledComponents size={32} alt="styled-components logo" />
```

### Vue

```vue
<script setup>
import { StyledComponents } from "@dev.icons/vue";
</script>

<template>
  <StyledComponents :size="32" alt="styled-components logo" />
</template>
```

### Svelte

```svelte
<script>
  import { StyledComponents } from "@dev.icons/svelte";
</script>

<StyledComponents size={32} alt="styled-components logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/styled-components.svg" alt="styled-components logo" width="48" height="48" />
```

### Icon font

```css
@import "devicons/css"; /* npm install devicons */
```

```html
<i class="devicons devicons-styled-components"></i>
```

## About the styled-components logo

The styled-components logo is a thin grey (#4A4A4A) square frame holding a pair of angle brackets with a 💅 nail polish emoji between them, and "styled components" written in two lines below. The official logo draws the emoji with the system emoji font. This version uses the Noto Emoji vector (Apache License 2.0) so it renders the same everywhere.

The grey frame and text are hard to read on dark surfaces, so use the monochrome version there.

## When to use this logo

Use styled-components in React styling approach comparisons, CSS-in-JS migration guides, design system docs and component library stack diagrams. It pairs naturally with React, Chakra UI, Tailwind, Sass and Next.js.

## Related icons

- [Panda CSS](/icons/pandacss.md)
- [Stylis](/icons/stylis.md)
- [Tailwind](/icons/tailwind.md)
- [Greensock](/icons/greensock.md)
- [Compass](/icons/compass.md)
- [Hookstate](/icons/hookstate.md)
- [Jotai](/icons/jotai.md)
- [Less](/icons/less.md)

## Browse the catalog
- Previous: [StyleCI](/icons/styleci.md)
- Next: [Stylefmt](/icons/stylefmt.md)
- [All icons](/icons.md)