DEVICONS

styled-components logo

1 style v1.3.0

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.

Also known as Styled Components, styled, CSS-in-JS

Download SVG styled-components.com
cssreactcss in jsstylingjavascript

Looks better on a light background

Preview
|
Usage
Install
npm i @dev.icons/react
Import
import { StyledComponents } from "@dev.icons/react";
Render
<StyledComponents size={32} />

Using an AI agent? Ask the Devicons MCP server for styled-components, or fetch its JSON from the Icons API.

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.

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