# Sizes & Typography

# Font sizes

Below is the list of our standard sizes used for typography and its corresponding SCSS variables respectively:

extra-small
var(--font-size-extra-small)
small
var(--font-size-small)
regular
var(--font-size-regular)
big
var(--font-size-big)

These sizes are defined here

# Icon sizes

Similarly, we provide the same standard sizes for customizing SfIcon.

xxs
xs
sm
md
lg
xl
xxl
xl3
xl4

Each size used from this list for the icon will be converted to a proper size class, following the syntax sf-icon--size-<size>. For example sf-icon--size-xxs. These classes for sizes are defined here

You can apply any size from the list above to an icon, simply by passing the size's label to size prop, e.g

<sf-icon size="xxs"/>

or by importing the list of icon sizes from @storefront-ui/shared/variables/sizes and using the desired size variable, e.g

<template>
  <sf-icon :size="iconSize"/>
</template>
<script>
import { sizes } from "@storefront-ui/shared/variables/sizes";
export default {
  data() {
    return {
      iconSize: sizes.xxs
    }
  }
}
</script>

More information on SfIcon can be found here