Skip to content

SkiMobile · active brand and network standards guide.

Visual system

Graphics and icons

SkiMobile Icons 1.0: 143 pictograms, accent colours, five motion states, SVG and transparent PNG. Searchable catalogue and ready-to-use collections.

Icon library

Loading the icon library…

One language for every scenario

SkiMobile Icons 1.0 is a unified collection of 143 symbols across 11 groups: equipment, resort and weather, services and branches, booking and payment, account and communication, navigation, actions, media and files, settings, states, and brand and documents. Each symbol retains the same meaning across screens and applications.

Fifteen original pictograms express SkiMobile’s expertise: skis, snowboard, two boot types, helmet, goggles, poles, jacket, pants, gloves, equipment set, bindings, slope, maintenance and drying. Universal symbols use Lucide geometry. Icons identify categories or actions; photographs show specific equipment.

Geometry, sizes and placement

The master uses a 24 × 24 grid, 1.75 stroke weight, rounded caps and joins, no fill or dimensional effects. Geometry scales proportionally. UI sizes: 16 px with metadata, 20 px in rows, 24 px in buttons, and 32–48 px on service cards. Neighbouring symbols use the same size and weight.

Allow 8 px between icon and label, or 6 px in compact rows. Align the symbol optically with the text and reserve its space before rendering. Do not stretch a single axis, crop the symbol or place it over busy imagery without a calm surface.

Accent and semantic colour

Accent outline: the main drawing uses the text colour and a meaningful detail uses the selected accent. Sky blue is the default, with teal, violet, green and amber alternatives. Choose monochrome for single-colour production and dense interfaces. Light and dark files use separate values for their intended surfaces.

Red identifies errors, danger and critical actions. Success uses green and warnings use amber. Semantic symbols retain these colours regardless of the user’s accent. Pair colour with shape and a clear label; colour alone never communicates criticality. Logo colours remain fixed.

Entry, loop, feedback and exit

Static is the complete readable symbol. Entry takes 0.48 s: the outline reveals, scale settles at 100%, and the detail gains its accent. Exit takes 0.28 s: opacity fades while the symbol continues its glide and ends on an empty frame. Feedback is one short 0.56 s gesture after an action.

The 3.2 s loop is seamless. The symbol breathes up to 101.5%; a meaningful detail lifts, slides or turns slightly, while the accent softens and returns. Loading indicators rotate. Only the selected sample moves; the catalogue stays calm and readable.

In working screens, icons provide short feedback on hover, keyboard focus and press. Continuous motion communicates an ongoing process or appears in a separately controlled sample. Loops include pause, stop offscreen and in hidden tabs, and retain manual pauses. Icons use no sound.

Accessibility and controls

Targets are at least 44 × 44 px even for a 16 px symbol. Important actions include visible text. Icon-only buttons have accessible names; decorative symbols are hidden from screen readers. Selection also uses a border and aria-pressed, and keyboard focus has a visible outline.

Less motion and the system reduced-motion preference show the static symbol; the system preference takes priority. The library retains manual scrubbing, frame stepping and downloads. High contrast strengthens the UI, while forced system colours replace accents with the text colour. Warnings never flash or rotate.

Files, collections and sources

SVG is a transparent vector with a static drawing or standalone animation and no external dependencies. PNG is a static RGBA file at 16, 20, 24, 32, 48, 64, 128, 256 or 512 px. It is generated using the selected colour, theme and size; the preview surface is excluded. For print, use a static monochrome SVG and retain its proportions.

The complete collection and 11 category collections include every SVG variant, RU/EN instructions and origin records. A separate compact package contains vector geometry, timeline, catalogue and SVG sprite. Share links preserve icon, state, colour, theme, format, size and page language.

Original pictograms and motion were created for SkiMobile. Lucide geometry uses ISC; inherited Feather geometry uses MIT. Licence notices are included in exported SVGs and archives. Publish a new collection version when geometry or timeline changes and preserve previous file URLs.

Illustrations and patterns

Build mountain lines from simple contours with rounded joins. Use navy and sky blue, one stroke weight and generous space. Place patterns at the edges of an application; keep text over a plain surface.

Retain each image’s SVG master, colour variant and usage information. Do not mix outline and 3D icons in one interface.

Validation

Check actual-size legibility, both themes, semantic colour, keyboard focus and reduced motion. Entry ends on the static master, exit on an empty frame, and loop endpoints match. Use current library files and never substitute an unrelated look-alike symbol.

Choose pictograms by meaning

Use familiar action symbols: phone for contact, map pin for location and delivery for handover. Sport pictograms identify categories; they do not prove a particular model is available or equipment is safe.

Pair arrows with words for branch wayfinding. At small sizes choose static versions without secondary detail and check single-colour print. Hide decorative SVGs from screen readers and give icon-only buttons an accessible name.