.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--Corner-radius-rounded);
  background-color: var(--Surface-UI-Fill-Default);
}

.small {
  width: var(--Space-x3);
  height: var(--Space-x3);
}
.large {
  width: var(--Space-x4);
  height: var(--Space-x4);
}

.attractions {
  background-color: var(--Surface-Accent-3);
}
.business {
  background-color: var(--Surface-Accent-4);
}
.location {
  background-color: var(--Surface-Feedback-Neutral-Accent);
}
.parking {
  background-color: var(--Surface-Accent-5);
}
.publicTransport {
  background-color: var(--Surface-Accent-2);
}
.shoppingDining {
  background-color: var(--Surface-Accent-1);
}

.icon.transparent {
  background-color: transparent;
  padding: 0;
}