# Styling


LikeC4 provides advanced customization capabilities. You can change colors, shapes, sizes, and icons of elements and relationships.

## Element

There are multiple ways to style elements:
- Style all elements of a kind in `specification`
- Specific for an element in `model` or `deployment`
- Override styles in `view` (more on this in [next section](/dsl/views/predicates/#style-predicates))

### Elements of a kind

To style all elements of a kind, use the `style` block in `specification`:

```likec4 copy
specification {
  element user {
    style {
      // every element of 'user' kind
      shape person // has 'person' shape
      color amber  // and amber color
    }
  }

  element frontend {    
    style {
      // every 'frontend' displayed as browser
      shape: browser // ':' is optional, but if you prefer
    }
  }
}
```

### Single element

To style a specific element, use the nested `style` block.  
Element styles override ones from the kind:

```likec4 copy
specification {
  element actor {
    style {
      shape person
      color red
    }
  }
}

model {
  customer = actor 'Customer' {
    style {
      // inherits shape and overrides color
      color green                   
    }
  }
}
```

### Per view

[Next section](/dsl/views/predicates/#style-predicates) clarifies how to customize elements per view.

## Style properties

### Shape

```likec4 "shape person" copy
specification {
  element actor {
    style {
      shape person
    }
  }
}
```

Available shapes: `rectangle` (default), `storage`, `cylinder`, `browser`, `mobile`, `person`, `queue`, `bucket` and `document`.  

<LikeC4ThemeView viewId="allshapes"/>

### Color


```likec4 "color red" copy
specification {
  element actor {
    style {
      color red
    }
  }
}
```

Available colors: `primary` (default), `secondary`, `muted`, `amber`, `gray`, `green`, `indigo`, `red`.

<LikeC4ThemeView viewId="index"/>

:::tip
It's also possible to use custom colors defined in [specification](/dsl/specification/#color).
:::

### Size

Size of an element is controlled by following properties:

| property  | explanation |
| :-------- | :----- |
| size      | size of the shape |
| padding   | space around element's title |
| textSize  | font size of element's title  |

Every property accepts: `xsmall`, `small`, `medium`, `large`, `xlarge`  
(or short `xs`, `sm`, `md`, `lg`, `xl`).  
Default size is `medium`.

When shape size is `xsmall`, only element's title is displayed.

```likec4 "size large" "textSize xl"
specification {
  element element {
    style {
      size large
      textSize xl
    }
  }
}
```
<LikeC4ThemeView viewId="sizes1_example" interactive={false}/>
<LikeC4ThemeView viewId="sizes2_example" interactive={false}/>

### Opacity

If element displayed as a group (like a container), you can set opacity:

```likec4 "opacity 10%"
specification {
  element element {
    style {
      opacity 10%
    }
  }
}
```


<LikeC4ThemeView viewId="opacity_example"/>

### Border

If element displayed as a group (like a container), you can change border style:

```likec4 "border dotted"
specification {
  element element {
    style {
      opacity 10%
      border dotted
    }
  }
}
```

Supported values: `dashed` (default), `dotted`, `solid`, `none`

<LikeC4ThemeView viewId="border_example"/>

### Multiple

To display element as multiple instances, set `multiple` to `true`:

```likec4
specification {
  element element {
    style {
      multiple true
    }
  }
}

```

<LikeC4ThemeView viewId="multiple_example" interactive={false} fitViewPadding={'16px'}/>

### Icon

Elements may have an icon - any browser-supported image (png, svg, webp, etc.):

```likec4 copy
model {
  pg = service 'PostgreSQL' {
    style {
      // Publicly available with `https://`
      icon https://icons.terrastruct.com/dev%2Fpostgresql.svg

      // or local image, relative to current file
      icon ../postgresql.svg
    }
  }
}
```

:::tip
`icon` can be defined as a property and skip `style` block

```likec4 copy
model {
  pg = service 'PostgreSQL' {
    icon https://icons.terrastruct.com/dev%2Fpostgresql.svg
  }
}
```
:::

:::tip
Use `none` to unset `icon`

```likec4 copy
pg = service 'PostgreSQL' {
  icon none
}
```
:::

### Bundled icons

LikeC4 includes icons (over 5,000 in total) from these packs:
- `aws:` from <a href="https://aws-icons.com" target='_blank'>aws-icons.com</a>
- `azure:` from <a href="https://learn.microsoft.com/en-us/azure/architecture/icons/" target='_blank'>microsoft.com</a>
- `bootstrap:` from <a href="https://icons.getbootstrap.com/" target='_blank'>Bootstrap Icons</a> (2,000+ icons)
- `gcp:` from <a href="https://gcpicons.com" target='_blank'>gcpicons.com</a>
- `tech:` from <a href="https://techicons.dev" target='_blank'>techicons.dev</a> and <a href="https://svglogos.dev/" target='_blank'>svglogos.dev</a>

Example:

```likec4 copy
model {
  fn = service 'Lambda Function' {
    icon aws:lambda
  }
  k8s = service 'K8s Service' {
    icon gcp:google-kubernetes-engine
  }
  pg = storage 'PostgreSQL' {
    icon tech:postgresql
  }
  ui = component 'User Interface' {
    icon bootstrap:house
  }
}
```

<br/>

<LikeC4ThemeView viewId="icons_example"/>

<br/>

:::tip
Use VSCode code completion to explore available icons.
:::


### Icon color

Use `iconColor` to override the icon color independently from the element fill:

```likec4 copy
model {
  api = service 'API' {
    style {
      icon bootstrap:gear
      iconColor indigo
    }
  }
}
```

`iconColor` accepts theme colors or custom colors defined in [specification](/dsl/specification/#color).  
Applies to external svg-icons and bundled `bootstrap:*` icons.

### Icon size

Use `iconSize` to resize the icon without changing the element size:

```likec4 copy
model {
  api = service 'API' {
    style {
      icon tech:nodejs
      iconSize sm
    }
  }
}
```

`iconSize` uses the same values as [size](/dsl/styling/#size) and defaults to the element `size`.

### Icon position

Use `iconPosition` to place the icon around the element text:

```likec4 copy
model {
  api = service 'API' {
    style {
      icon tech:nodejs
      iconPosition top
    }
  }
}
```

Supported values: `left` (default), `right`, `top`, `bottom`.


<LikeC4ThemeView viewId="icons_position_example" style={{ '--likec4-view-max-height': '250px', minHeight: '250px' }}/>

### Aliased icons

With `@` prefix, you can use aliased folders (learn more in [configuration](/dsl/config/#image-aliases)):

```likec4 copy
model {
  pg = service 'PostgreSQL' {
    style {
      // local images, based on aliased folders
      icon @/postgresql.svg
    }
  }
}
```


## Relationship

There are multiple ways to style relationships:
- Style all relationships of a kind in `specification`
- Specific relationship in `model`
- Customize per `view` ([explained here](/dsl/views/predicates/#relationship-customization))

### Relationships of a kind

Relationships can be styled in [specification](/dsl/relationships/#relationship-kinds):

```likec4
specification {
  relationship async {
    color amber
    line dotted
    head diamond
    tail vee
  }
}
```

### Specific Relationship

```likec4
model {
  customer -> ui 'opens in browser' {
    style {
      line solid
      color amber
    }
  }
}
```

### Relationship per view

[Next section](/dsl/views/predicates/#relationship-customization) clarifies how to customize relationships per view.

## Relationship properties

Besides the `color`, relationships may have the following properties:  

### Line

| line   | example |
| :----- | :-----: |
| dashed |   ..    |
| solid  |   ..    |
| dotted |   ..    |

By default, the line is `dashed`.

### Arrow type

The arrow type can be set for the head and the tail of the relationship:

| type      | example |
| :-------- | :-----: |
| normal    |   ..    |
| onormal   |   ..    |
| diamond   |   ..    |
| odiamond  |   ..    |
| crow      |   ..    |
| vee       |   ..    |
| open      |   ..    |
| none      |   ..    |

> `onormal` means "outlined normal", i.e. no fill  
> `odiamond` - "outlined diamond"

By default, the head is `normal` and the tail is `none`.

```likec4
model {
  customer -> ui 'opens in browser' {
    style {
      head diamond
      tail crow
    }
  }
}
```

## Styles customization

How to override default styles is explained in project configuration

<LinkCard
  title="Project configuration"
  description="Learn how to customize styles in your project"
  href="/dsl/config/#styles-customization"
/>