Illustrative Icons
Illustrative icons are large, expressive icons used for empty states, onboarding, confirmations, and other contextual moments in the UI. Most come in pairs: a default variant for light backgrounds and an OnDark variant for dark backgrounds.
Light variants
| Name | Component | Description | |
|---|---|---|---|
illustrative-areena-mobile-app | IllustrativeAreenaMobileApp | Used in contexts related to downloading the Areena mobile app. | |
illustrative-areena-smart-tv | IllustrativeAreenaSmartTv | Used in contexts related to the Areena smart TV app. | |
illustrative-celebrate | IllustrativeCelebrate | Used for celebrations, successes, or important milestones. | |
illustrative-cookies | IllustrativeCookies | Used in contexts related to cookies. | |
illustrative-error-1 | IllustrativeError1 | Visually confirms to the user that an action has failed. This is a neutral visual approach to error states. | |
illustrative-error-2 | IllustrativeError2 | Visually confirms to the user that an action has failed. This is a more expressive visual approach to error states. | |
illustrative-favourite | IllustrativeFavourite | Used in contexts related to the user's favourites. | |
illustrative-globe | IllustrativeGlobe | Used in contexts related to language settings. | |
illustrative-info-message | IllustrativeInfoMessage | Used in contexts related to informing or reminding the user. | |
illustrative-information | IllustrativeInformation | Used alongside service information. | |
illustrative-location | IllustrativeLocation | Used in contexts related to location data. | |
illustrative-mail | IllustrativeMail | Used in contexts related to account creation. | |
illustrative-message | IllustrativeMessage | Used in contexts related to messaging. | |
illustrative-notification | IllustrativeNotification | Used in contexts related to notifications. | |
illustrative-play | IllustrativePlay | Used in contexts related to video autoplay. | |
illustrative-profile | IllustrativeProfile | Used in contexts related to signing in. | |
illustrative-rating | IllustrativeRating | Used in contexts related to user-submitted ratings. | |
illustrative-success | IllustrativeSuccess | Visually confirms to the user that an action was successful. | |
illustrative-theme | IllustrativeTheme | Used in contexts related to managing the service theme. | |
illustrative-user-recommendation | IllustrativeUserRecommendation | Used alongside user-given recommendations and weightings for the recommendation algorithm. | |
illustrative-yle-app | IllustrativeYleApp | Used in contexts related to downloading the Yle app. |
Dark variants (OnDark)
Use these on dark backgrounds. The name suffix -on-dark corresponds to an OnDark suffix on the component name.
| Name | Component | Description | |
|---|---|---|---|
illustrative-areena-mobile-app-on-dark | IllustrativeAreenaMobileAppOnDark | Used in contexts related to downloading the Areena mobile app. | |
illustrative-areena-smart-tv-on-dark | IllustrativeAreenaSmartTvOnDark | Used in contexts related to the Areena smart TV app. | |
illustrative-celebrate-on-dark | IllustrativeCelebrateOnDark | Used for celebrations, successes, or important milestones. | |
illustrative-cookies-on-dark | IllustrativeCookiesOnDark | Used in contexts related to cookies. | |
illustrative-error-1-on-dark | IllustrativeError1OnDark | Visually confirms to the user that an action has failed. This is a neutral visual approach to error states. | |
illustrative-error-2-on-dark | IllustrativeError2OnDark | Visually confirms to the user that an action has failed. This is a more expressive visual approach to error states. | |
illustrative-favourite-on-dark | IllustrativeFavouriteOnDark | Used in contexts related to the user's favourites. | |
illustrative-globe-on-dark | IllustrativeGlobeOnDark | Used in contexts related to language settings. | |
illustrative-info-message-on-dark | IllustrativeInfoMessageOnDark | Used in contexts related to informing or reminding the user. | |
illustrative-information-on-dark | IllustrativeInformationOnDark | Used alongside service information. | |
illustrative-location-on-dark | IllustrativeLocationOnDark | Used in contexts related to location data. | |
illustrative-mail-on-dark | IllustrativeMailOnDark | Used in contexts related to account creation. | |
illustrative-message-on-dark | IllustrativeMessageOnDark | Used in contexts related to messaging. | |
illustrative-notification-on-dark | IllustrativeNotificationOnDark | Used in contexts related to notifications. | |
illustrative-play-on-dark | IllustrativePlayOnDark | Used in contexts related to video autoplay. | |
illustrative-profile-on-dark | IllustrativeProfileOnDark | Used in contexts related to signing in. | |
illustrative-rating-on-dark | IllustrativeRatingOnDark | Used in contexts related to user-submitted ratings. | |
illustrative-success-on-dark | IllustrativeSuccessOnDark | Visually confirms to the user that an action was successful. | |
illustrative-theme-on-dark | IllustrativeThemeOnDark | Used in contexts related to managing the service theme. | |
illustrative-user-recommendation-on-dark | IllustrativeUserRecommendationOnDark | Used alongside user-given recommendations and weightings for the recommendation algorithm. | |
illustrative-yle-app-on-dark | IllustrativeYleAppOnDark | Used in contexts related to downloading the Yle app. |