ZSH Console Icons

A vector icon that displays a abstract console window. Created for practicing with a vector program and trying out media queries in SVG graphics.

• Images
• Automatic day-night 🌃 switch
• Colorful console
  • Colors
  • Font
  • Themes
• Source File
• License

Images

Available icons with SVG preview.

Default	Classic
zsh-console-default.svg zsh-console-default.png zsh-console-default@2x.png	zsh-console-classic.svg zsh-console-classic.png zsh-console-classic@2x.png

macOS Light	macOS Dark
zsh-console-macos-light.svg zsh-console-macos-light.png zsh-console-macos-light@2x.png	zsh-console-macos-dark.svg zsh-console-macos-dark.png zsh-console-macos-dark@2x.png

macOS Light & Forced Colors	macOS Dark & Forced Colors
zsh-console-macos-forced-colors-light.svg zsh-console-macos-forced-colors-light.png zsh-console-macos-forced-colors-light@2x.png	zsh-console-macos-forced-colors-dark.svg zsh-console-macos-forced-colors-dark.png zsh-console-macos-forced-colors-dark@2x.png

Automatic day-night 🌃 switch

This icon will automatically change colors based on the selected operating system theme.

*Does not work in Safari.

Show different sizes of this icon or test the color change with the developer tools.

This SVG is manually edited and cannot be found in the artboard.

This icon supports the following media queries:

CSS media query	Description	Static preview
@media (prefers-color-scheme: light)	Bright operating system theme (default)	zsh-console-macos-light.svg
@media (prefers-color-scheme: dark)	Dark operating system theme	zsh-console-macos-dark.svg
@media (forced-colors: active)	High-contrast theme for people with low vision. The colors used are determined by the browser, see at W3C CSS Color Module Level 4 - 6.2. System Colors.	zsh-console-macos-forced-colors-light.svg
@media (forced-colors: active) and (prefers-color-scheme: dark)	Dark high-contrast theme for people with low vision. The colors used are determined by the browser, see at W3C CSS Color Module Level 4 - 6.2. System Colors.	zsh-console-macos-forced-colors-dark.svg

The file index.html contains an example for the embedding of this SVG graphic.

Colorful console

My console, recreated as a vector graphic. The font of the SVG is exported as a curve, use the source file to edit the text.

Colors

Used text ansi-colors in the terminal.

colors: {
    black:          '#000000',
    red:            '#C51E14',
    green:          '#1DC121',
    yellow:         '#C7C329',
    blue:           '#774CFF',
    magenta:        '#C839C5',
    cyan:           '#20C5C6',
    white:          '#C7C7C7',
    lightBlack:     '#686868',
    lightRed:       '#FF5430',
    lightGreen:     '#3FF12F',
    lightYellow:    '#F1F01F',
    lightBlue:      '#DA97FF',
    lightMagenta:   '#FF54FF',
    lightCyan:      '#01E5E6',
    lightWhite:     '#FFFFFF',
    limeGreen:      '#32CD32',
    lightCoral:     '#F08080',
}

Used foreground and background colors in the terminal.

foregroundColor: '#fff',
backgroundColor: '#282B34',

Used special colors in the terminal.

selectionColor: 'rgba(248,28,229,0.3)',
cursorColor: '#929292',
cursorAccentColor: '#000'

Font

The font used is Fira Code with text size 18px.

Fira Code is an open monospaced font with programming ligatures by Nikita Prokopov. (Download the font)

Themes

Here you can find preconfigured terminal profiles, which contain the color and font settings.

Theme for the hyper.is terminal app:
.hyper.js

Theme for the default macos terminal:
Colorful.terminal

There is no profile export function in the Gnome terminal.

The components used in this image are exa as ls alternative and the zsh shell with the extensions syntax-highlighting, autosuggestions and a custom PROMT= string. Example installation with Ansible.

Source File

The original file for editing can be found here zsh-console-artboard.afdesign. This can be opened with Affinity Designer or Affinity Photo. Use this file zsh-console-artboard.svg to edit with another vector program.

The font is stored in the packages folder under zsh-console-artboard.afpackage.

Artboards preview
Slices preview

Each icon is assigned to a drawing area, for automatic export of all icons as SVG and PNG click:
Export Persona -> Export Slices

License

This project is licensed under MIT - See the LICENSE file for more information.

---

↑ Back to top