message: Use functional variables in documentation for CircleOcticon
diff: title: CircleOcticon
  ---
  -
  CircleOcticon renders any Octicon with a circle background. CircleOcticons are most commonly used to represent the status of a pull request in the comment timeline.
  ## Default example
  ```jsx live
  - <CircleOcticon icon={CheckIcon} size={32} bg="green.5" color="white"/>
  +<CircleOcticon icon={CheckIcon} size={32} bg="icon.success" color="text.inverse" />
  ```
  ## System props
  @@ -18,6 +17,6 @@ CircleOcticon components get `COMMON` system props. Read our [System Props](/sys
  ## Component props
  | Name | Type | Default | Description |
  -| :- | :- | :-: | :- |
  +| :--- | :------ | :-----: | :------------------------------------------------ |
  | icon | Octicon | | Octicon component used in the component |
  | size | Number | 32 | used to set the width and height of the component |
  